# Bento grid (goodtabs UI)

Tiles of mixed sizes inside one frame, divided by hairlines, each with a visual and copy.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/bento-grid.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/bento-grid`

## Usage

```tsx
import { BentoGrid, BentoTile } from "@/components/bento-grid"

<BentoGrid>
  <BentoTile span="2" title="One calm look" description="Every piece reads your theme tokens.">
    <img src="/themes.png" alt="" />
  </BentoTile>
  <BentoTile title="Install" description="One command per component." />
</BentoGrid>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | On BentoTile: the tile title, one short line. |
| description | `ReactNode` |  | On BentoTile: one or two sentences under the title. |
| span | `"1" | "2" | "3" | "tall"` | `"1"` | On BentoTile: a third, two thirds, the full row, or a third over two rows. |
| children | `ReactNode` |  | On BentoTile: the visual, drawn above the text and given the spare height. |

## When to use

- A features section where some points deserve more room than others
- A product overview with one big visual and a few small facts around it
- A stats or highlights block that should read as one surface

## When not to use

- Equal points with no visual, which want the feature card grid
- Content that changes length or count at runtime; spans are chosen by hand
- Interactive tiles that link somewhere; wrap your own link inside a tile instead

## Notes for agents

- Twelve columns from lg: spans 1, 2 and 3 are a third, two thirds and the full row, tall is a third over two rows
- Choose spans so each row adds up to three thirds, or the last row leaves a gap in the frame
- The frame paints bg-border and each tile paints bg-card, so a tile must stay opaque; override the fill, not the gap
- Server components with no state; the visual slot is plain children, keep it decorative or give it its own alt text

Docs: https://ui.goodtabs.co/components/bento-grid