# Bento grids 01

> Three-column bento: primary tile (two-thirds) with title, description, CTA and media, plus supporting image cards.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/bento-grids-01).

- Page, with a live preview: https://shadcn.exchange/r/flx/bento-grids-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/bento-grids-01-light-be5d44aef005439c.png
- Registry item: https://ui.flexnative.com/r/bento-grids-01.json
- Listed: 2026-10-11, source last changed 2026-10-11

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/bento-grids-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `react-wrap-balancer`
- Registry items: `@flx/cta`

## Files

### `registry/blocks/bento-grids/bento-grids-01/bento-grids-01.tsx`

```tsx
import type { CtaProps } from '../../shared/cta'
import { Cta } from '../../shared/cta'
import { cn } from '@/lib/utils'

export type PrimaryItemMedia = {
  src: string
  title: string
}

export type PrimaryItem = {
  title: string
  description: string
  cta: CtaProps
  media: PrimaryItemMedia
}

export type GridItem = {
  title: string
  description: string
  media: PrimaryItemMedia
}

export interface BentoGrids01Props {
  className?: string
  primary: PrimaryItem
  items: GridItem[]
}

export function BentoGrids01({
  className,
  primary,
  items,
}: Readonly<BentoGrids01Props>) {
  return (
    <section className="w-full">
      <div className="mx-auto w-full max-w-6xl px-6 py-12 sm:py-16">
        <div
          className={cn('grid grid-cols-1 gap-6 md:grid-cols-3', className)}
          aria-label="Bento grids 01"
        >
          <article className="bg-card col-span-1 overflow-hidden rounded-md p-4 md:col-span-2">
            <div className="grid h-full grid-cols-1 items-stretch gap-6 md:grid-cols-2">
              <div className="flex flex-col justify-between gap-6">
                <div className="space-y-3">
                  <h2 className="text-lg font-semibold tracking-tight md:text-xl">
                    {primary.title}
                  </h2>
                  <p className="text-muted-foreground text-sm whitespace-pre-line">
                    {primary.description}
                  </p>
                </div>

                <div className="flex">
                  <Cta cta={{ ...primary.cta, variant: 'outline' }} />
                </div>
              </div>

              <div className="bg-muted relative min-h-64 w-full overflow-hidden rounded-md md:min-h-0">
                <img
                  src={primary.media.src}
                  alt={primary.media.title}
                  loading="lazy"
                  decoding="async"
                  className="absolute inset-0 size-full object-cover"
                />
              </div>
            </div>
          </article>

          {items.map((item) => (
            <article
              key={`${item.title}-${item.media.src}`}
              className="bg-card col-span-1 overflow-hidden rounded-md p-4"
            >
              <div className="flex h-full flex-col gap-6">
                <div className="bg-muted relative aspect-[4/3] overflow-hidden rounded-md">
                  <img
                    src={item.media.src}
                    alt={item.media.title}
                    loading="lazy"
                    decoding="async"
                    className="absolute inset-0 size-full object-cover"
                  />
                </div>
                <div className="space-y-1">
                  <h3 className="text-base font-medium">{item.title}</h3>
                  <p className="text-muted-foreground text-sm whitespace-pre-line">
                    {item.description}
                  </p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### `registry/blocks/bento-grids/bento-grids-01/bento-grids-01-example.tsx`

```tsx
import { BentoGrids01, type BentoGrids01Props } from './bento-grids-01'

export const values = {
  primary: {
    title: 'Build bento sections in minutes',
    description:
      'Create a bold primary feature with a CTA and media, then follow it with supporting image cards.',
    cta: {
      ctaEnabled: true,
      text: 'Explore blocks',
      link: '',
      variant: 'default' as const,
      size: 'sm' as const,
    },
    media: {
      title: 'Design',
      src: 'https://images.unsplash.com/photo-1695152560286-b09a744834e1?q=80&w=1133&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    },
  },
  items: [
    {
      title: 'Dynamic cards',
      description: 'Swap images and copy without breaking layout or spacing.',
      media: {
        title: 'Components',
        src: 'https://images.unsplash.com/photo-1683143724745-d66cf5ea5ce7?q=80&w=1202&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
    },
    {
      title: 'Responsive by default',
      description:
        'Stacks on mobile and becomes a 3-column bento on larger screens.',
      media: {
        title: 'Developer Experience',
        src: 'https://images.unsplash.com/photo-1577083862054-7324cd025fa6?q=80&w=1241&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
    },
    {
      title: 'Clean visual hierarchy',
      description:
        'Primary content stands out while the supporting cards stay readable.',
      media: {
        title: 'Customization',
        src: 'https://images.unsplash.com/photo-1683143726118-9abaed4e10f9?q=80&w=1062&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
    },
    {
      title: 'Extendable cards',
      description:
        'Add more cards, switch aspect ratios, and tune the spacing.',
      media: {
        title: 'Performance',
        src: 'https://images.unsplash.com/photo-1734552452335-e8b67797bad0?q=80&w=1212&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
      },
    },
  ],
} satisfies BentoGrids01Props

export function BentoGrids01Example() {
  return <BentoGrids01 primary={values.primary} items={values.items} />
}
```