# Dashboard Grid

> A widget dashboard you can rearrange. Drag a handle and the other widgets slide out of the way, or focus it, press Space and use the arrow keys (Escape puts it back). Each widget's menu resizes it (small, medium, tall, large, wide) or removes it, with every change announced. Controlled or uncontrolled.

- Slug: `dashboard-grid`
- Category: [Bento & Grids](https://www.assembli.design/category/bento-grids.md)
- Type: component
- Tags: dashboard, grid, drag-and-drop, widgets, reorder, resize
- npm dependencies: @base-ui/react, lucide-react, motion
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/dashboard-grid
- Page: https://www.assembli.design/components/dashboard-grid

![Dashboard Grid preview](https://www.assembli.design/thumbnails/dashboard-grid-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `widgets` | `DashboardWidget[]` |  |  |
| `defaultWidgets` | `DashboardWidget[]` | `[]` |  |
| `onWidgetsChange` | `(widgets: DashboardWidget[]) => void` |  | Called with the new list after a move, resize or removal. |
| `editable` | `boolean` | `true` | Show the drag handles and widget menus. Defaults to `true`. |
| `rowHeight` | `string` | `"9.5rem"` | Height of one row, as a CSS length. Tall and large widgets cover two. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/dashboard-grid/dashboard-grid.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/dashboard-grid
```

Registry item JSON: https://www.assembli.design/r/dashboard-grid.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.