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 github:itsvigneshv/default-file-ui#main df-ui add widget-grid
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.