#187
Dashboard page
A page shell inside a flush card with a title, description, New report action, four KPI cards and a placeholder card.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Dashboard page" pattern (@codeatlasdev/ui demo #187, layout/page-shell) in my app.
Call get_demo({ ids: ["#187"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Dashboard pages with a header, a primary action, headline metrics and a content area.
Keep these library parts, with the props and tokens the demo uses:
- PageShell, KpiCard, KpiGrid, Card, Stack, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<Card flush full>` wraps `<PageShell title="Dashboard" description="Overview of this month">`
- `{#snippet actions()}<Button variant="filled" size="sm">New report</Button>{/snippet}`
- `<Stack gap="6">` holds a `KpiGrid` and a `<Card full>`
- `KpiGrid` has 4 `KpiCard` items: Revenue `$118k`, Users `24.8k`, Growth `34%`, Uptime `99.9%`
- Placeholder card text is Chart or data table goes here
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- PageShell
@codeatlasdev/ui - KpiCard
@codeatlasdev/ui - KpiGrid
@codeatlasdev/ui - Card
@codeatlasdev/ui - Stack
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<Card flush full>` wraps `<PageShell title="Dashboard" description="Overview of this month">`
- `{#snippet actions()}<Button variant="filled" size="sm">New report</Button>{/snippet}`
- `<Stack gap="6">` holds a `KpiGrid` and a `<Card full>`
- `KpiGrid` has 4 `KpiCard` items: Revenue `$118k`, Users `24.8k`, Growth `34%`, Uptime `99.9%`
- Placeholder card text is Chart or data table goes here
Related
Loading source.