# Bento Grid

Bento Widgets on the Soft tray with 4 px gutters, for dashboards people arrange themselves.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/bento-grid
```

## Usage

```tsx
import { BentoGrid } from '@/components/fetaui/bento-grid'

export function Example() {
  return <BentoGrid defaultOrder={saved} onOrderChange={saveOrder} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| tiles | BentoTile[] | the six widgets |
| order | string[] |  |
| defaultOrder | string[] | tile order |
| onOrderChange | (order) => void |  |
| mobileOrder | string[] | the Mobile layout |
| preview | hover, lifted |  |
| label | string | Dashboard |
| animated | boolean | true |

## When to use

- For a dashboard people arrange themselves.
- Save the order with `onOrderChange`.

## When not to use

- For a fixed layout: place Bento Widgets on your own grid.
- For more than a dozen tiles: use a Table or a list.

## Accessibility

- Each grip is a labelled button, and its Move menu does everything a drag does.
- Moves are announced politely, with the new position.
- Tiles keep their order in the DOM, so reading order follows the layout.

## Motion

- Pick up scales to 1.02 and tilts −3° in 200 ms, and the rest fade to 40%.
- A dashed slot shows where the tile lands.
- Drop springs to the slot in 400 ms, and the other tiles slide to their new cells together.
- Tiles move with transforms only, so nothing lays out per frame.
- With reduced motion, there is no lift or tilt: only the ring and the slot move.