#185
PageShell
A dashboard page shell with four KPI cards and a placeholder card for a chart or table.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "PageShell" pattern (@codeatlasdev/ui demo #185, layout/list-page) in my app.
Call get_demo({ ids: ["#185"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: The base page layout of a dashboard: title, headline metrics and a main content area.
Keep these library parts, with the props and tokens the demo uses:
- PageShell, KpiCard, KpiGrid, Card from "@codeatlasdev/ui"
Behaviour to keep:
- `<PageShell title="Dashboard">` is the root, with no description or actions
- `<KpiGrid>` holds 4 `KpiCard` items: Revenue `$118k`, Users `24.8k`, Growth `34%`, Uptime `99.9%`
- Each card has a `trend` and an `icon`, for example `trend={23.4} icon={DollarSign}`
- `<Card full>` holds the text Chart or data table goes here
- Frame size is `height: 420px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `<PageShell title="Dashboard">` is the root, with no description or actions
- `<KpiGrid>` holds 4 `KpiCard` items: Revenue `$118k`, Users `24.8k`, Growth `34%`, Uptime `99.9%`
- Each card has a `trend` and an `icon`, for example `trend={23.4} icon={DollarSign}`
- `<Card full>` holds the text Chart or data table goes here
- Frame size is `height: 420px`
Related
Loading source.