Dashboard Grid
Responsive grid layout for dashboard widgets
SaaSAnalytics
Overview
DashboardGrid provides a responsive CSS grid layout for arranging dashboard cards and widgets. It supports configurable breakpoint-based column counts and gap sizes. Use GridItem to control individual item column and row spans within the grid.
Usage
import { DashboardGrid, GridItem, StatCard } from "@leanicon/web-builder-library/saas";
<DashboardGrid columns={{ default: 1, sm: 2, lg: 4 }} gap="md">
<GridItem>
<StatCard label="Revenue" value={48250} />
</GridItem>
<GridItem>
<StatCard label="Users" value={3842} />
</GridItem>
</DashboardGrid>;Variants
Default (4 Columns)
Revenue
48,250
+12.5%Users
3,842
+4.2%Orders
1,294
3.1%Conversion
5.2%
0.0%Dark
Revenue
48,250
+12.5%Users
3,842
+4.2%Orders
1,294
3.1%Conversion
5.2%
0.0%Two Columns
Total Revenue
48,250
+12.5%Active Users
3,842
+4.2%With Column Spans
Monthly Revenue
128,400
+18.3%Churn Rate
2.4%
0.8%Small Gap
Revenue
48,250
+12.5%Users
3,842
+4.2%Orders
1,294
3.1%Conversion
5.2%
0.0%No Gap
Revenue
48,250
+12.5%Users
3,842
+4.2%Orders
1,294
3.1%Conversion
5.2%
0.0%Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
columns | ResponsiveColumns | { default: 1, sm: 2, md: 3, lg: 4 } | No | |
gap | enum | md | No |