Dashboard Grid
layoutDraggable and resizable dashboard widget grid layout.
Preview
No preview available
Check the code examples below.
Installation
npm install @launchapp/design-systemImport
import { DashboardGrid, DashboardGridItem } from "@launchapp/design-system";Examples
Dashboard widget grid
<DashboardGrid> <DashboardGridItem id="revenue" x={0} y={0} w={4} h={2}> <div className="h-full bg-muted rounded-lg p-4">Revenue</div> </DashboardGridItem> <DashboardGridItem id="users" x={4} y={0} w={4} h={2}> <div className="h-full bg-muted rounded-lg p-4">Users</div> </DashboardGridItem></DashboardGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | DashboardGridItem widgets. |
cols | number | 12 | Number of grid columns. |