# Bento Widget

One dashboard tile in three sizes: Revenue, Active users, Activity, Notes, Uptime and Storage, in ink steps.

Tier: Free

## Installation

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

## Usage

```tsx
import { BentoWidget } from '@/components/fetaui/bento-widget'

export function Example() {
  return <BentoWidget widget="revenue" size="medium" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| widget | revenue, active-users, activity, notes, uptime, storage | required |
| size | small, medium, large | small |
| data | the shape for that widget | sample data |
| onItemsChange | (items) => void, Notes only |  |
| grip | ReactNode | six dots |
| fill | boolean | false |
| hovered | boolean | false |
| animated | boolean | true |

## When to use

- For a dashboard tile that leads with one number.
- Pick a size by how much the number needs context. Small shows it, Medium adds the chart or list, Large adds the breakdown.

## When not to use

- For a full chart with axes: use a Chart.
- For a tile with its own actions: use Card.

## Accessibility

- A region named by its label, with the number as the first line.
- The Notes and Storage bars are progress bars with values.
- The Uptime bars are one image named with the incident, and the warning bar is never the only signal at Large, where the incident is written out.
- Checkboxes are native, and a done note is struck through as well as dimmed.

## Motion

- Values count up from 0 the first time they scroll into view, in 600 ms.
- Bars grow with a 20 ms stagger and the line draws left to right.
- Hover moves the ring to tertiary and the grip from 30% to 70%. Nothing moves until a drag.
- Checking a note dims and strikes the text in 200 ms, and the progress bar follows.
- With reduced motion, values show their final number and nothing grows.