Draggable and resizable widget layout on a CSS grid with keyboard edit affordances.
Also known as: dashboard grid, tile grid, resizable widgets
Install with the CLI, or copy the component source into your project.
Add widget-grid (npm)
1npx --yes -p @default-file/ui df-ui add widget-grid
Drag from the grip, resize from the edges, or tab to the move control and use arrow keys. Shift resizes, Enter commits, Escape cancels, and tiles honor min and max size.
Activity
Twelve updates in the current cycle.
Queue
Five items waiting for review.
Review
Two drafts need a second pass.
Notes
Capture follow-ups for the next session.
columns sets the grid track count. This board uses six columns instead of twelve.
Activity
Twelve updates in the current cycle.
Queue
Five items waiting for review.
Review
Two drafts need a second pass.
Notes
Capture follow-ups for the next session.
editable false removes drag, resize, and keyboard edit affordances.
Activity
Twelve updates in the current cycle.
Queue
Five items waiting for review.
Review
Two drafts need a second pass.
Notes
Capture follow-ups for the next session.
Custom empty content when the layout array is empty.
No widgets on this board.
minRowHeight overrides the row track size for this instance.
Activity
Twelve updates in the current cycle.
Queue
Five items waiting for review.
Review
Two drafts need a second pass.
Notes
Capture follow-ups for the next session.
Draggable and resizable widget layout on a CSS grid with keyboard edit affordances.
| Prop | Type | Default | Notes |
|---|---|---|---|
| layout | WidgetLayoutItem[] | - | Controlled cell placements (required). |
| onLayoutChange | (layout: WidgetLayoutItem[]) => void | - | Called after a move or resize commits. |
| renderWidget | (id: string) => ReactNode | - | Render function for each layout id (required). |
| columns | number | 12 | Column count for the grid. |
| editable | boolean | true | When false, drag, resize, and keyboard edit affordances are disabled. |
| minRowHeight | string | - | CSS length override for --df-widget-grid-row-height on this instance. |
| emptyContent | ReactNode | - | Content when the layout array is empty. |
| aria-label | string | - | Accessible name for the grid. Defaults to the kit string catalogue. Override when the host supplies a visible heading. |
| className | string | - | Additional styles on the root. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| id | string | - | Stable widget id (required). |
| x | number | - | Column index from the left (required). |
| y | number | - | Row index from the top (required). |
| w | number | - | Width in columns (required). |
| h | number | - | Height in rows (required). |
| minW | number | - | Minimum width in columns. |
| minH | number | - | Minimum height in rows. |
| maxW | number | - | Maximum width in columns. |
| maxH | number | - | Maximum height in rows. |
Grid name: Pass aria-label when a visible title is not enough; otherwise the catalogue default names the grid. Widget content: renderWidget must supply meaningful content and names inside each cell. Drag handles: Editable cells expose move and resize controls with catalogue labels. Live region: Keyboard edits announce the new cell position and size.