Bento Grid
Bento & Grids
Source and install need .
pnpm dlx shadcn@latest add @assembli/dashboard-gridDashboard 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.
Props
Other props pass through to the root element.
widgets
DashboardWidget[]
defaultWidgets
DashboardWidget[]
Default
[]onWidgetsChange
(widgets: DashboardWidget[]) => void
Called with the new list after a move, resize or removal.
editable
boolean
Default
trueShow the drag handles and widget menus. Defaults to
true.rowHeight
string
Default
"9.5rem"Height of one row, as a CSS length. Tall and large widgets cover two.
| 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. |
