bash
npm install @hua-labs/huatsx
import { DashboardGrid } from "@hua-labs/ui/advanced/dashboard";(3 columns)
Revenue
₩10M
Orders
1,234
Users
567
columns=2
Item 1
100
Item 2
200
columns=3
Item 1
100
Item 2
200
Item 3
300
Gap Variations
gap="sm"
A
1
B
2
C
3
gap="md"
A
1
B
2
C
3
gap="lg"
A
1
B
2
C
3
gap="xl"
A
1
B
2
C
3
Fixed Grid (Non-responsive)
1
A
2
B
3
C
4
D
Props
columns | 1 | 2 | 3 | 4 | 5 | 6 | 4 | Number of columns |
gap | "sm" | "md" | "lg" | "xl" | "md" | Gap between items |
responsive | boolean | true | Enable responsive breakpoints |
children* | React.ReactNode | - | Grid children |
className | string | - | Additional CSS class |
BasicDashboardGrid.tsxtsx
import { DashboardGrid, StatCard } from "@hua-labs/ui/advanced/dashboard";
export function BasicDashboardGrid() {
return (
<DashboardGrid columns={3}>
<StatCard title="Revenue" value="₩10M" />
<StatCard title="Orders" value="1,234" />
<StatCard title="Users" value="567" />
</DashboardGrid>
);
}ResponsiveGrid.tsxtsx
import { DashboardGrid, MetricCard } from "@hua-labs/ui/advanced/dashboard";
export function ResponsiveGrid() {
return (
<DashboardGrid columns={3} gap="lg" responsive>
<MetricCard title="Daily Visitors" value="2,345" />
<MetricCard title="Page Views" value="12,456" />
<MetricCard title="Avg. Time" value="3m 42s" />
</DashboardGrid>
);
}