# Feature bento (goodtabs UI)

A feature section laid out as a bento of mixed tiles on shared hairlines.

## Install

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

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

## Usage

```tsx
import { FeatureBento, BentoCell } from "@/components/feature-bento"

<FeatureBento title="Small parts, one system">
  <BentoCell size="big" title="Command menu" description="Search and run actions.">...</BentoCell>
  <BentoCell title="Install size" description="Per component.">1.2 kB</BentoCell>
</FeatureBento>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | Optional section heading. |
| description | `ReactNode` |  | Optional grey lead under the heading. |
| children | `ReactNode` |  | BentoCell elements. |
| size (BentoCell) | `"small" | "wide" | "tall" | "big"` | `"small"` | Footprint in columns by rows: small 1x1, wide 2x1, tall 1x2, big 2x2. |

## When to use

- A features section where some points deserve more room than others
- When each cell has a small visual: a number, a list, a code line
- Four to six cells that total a full rectangle

## When not to use

- Equal-weight points, which want the feature grid
- The shared-hairline tiles with a title inside the card kit; use the bento grid for that
- Cells with long copy, which stretch their row

## Notes for agents

- Four columns from the container's @2xl width, one column below, where sizes are ignored
- Cell sizes must tile a rectangle of four columns or the frame shows gaps filled with bg-border
- The frame paints bg-border through a 1px gap and each cell paints bg-card, so cells must stay opaque
- Server component; cells are plain divs, put your own visual in children

## The maths

- Grid = 4 columns, 1px gap; cell footprints big 2x2 = 4, wide 2x1 = 2, tall 1x2 = 2, small 1x1 = 1.
- Demo one: 4 + 1 + 1 + 2 = 8 = 4 x 2, so the rectangle fills with no gap.

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