Stat cards, charts, and table-driven views composed into full dashboards.
6 blocks, live at full size, install from here
01 / 06|Tabs range · intent-aware deltas · keyboard chart
Operations dashboard with a Tabs date-range switcher (1d / 7d / 30d / 90d), a 4-up metric strip, a weekly bar chart and a recent-activity feed. Every metric declares which direction is good news, so falling churn reads green; each chart bucket is a focusable control, so the numbers reach the keyboard as well as the mouse.
npx shadcn@latest add https://hirael.com/r/dashboard-01.json02 / 06|Area chart · sparkline KPIs · sr data table
Analytics dashboard with a date-range select, four sparkline KPI tiles, a layered two-series area chart and top-pages and channel-share side cards. Deltas carry their own unit (percent vs percentage points) and the direction that counts as good, and the area chart ships a screen-reader data table of the same numbers.
npx shadcn@latest add https://hirael.com/r/dashboard-02.json03 / 06|Donut plan mix · real pagination · month stepper
Revenue dashboard with a month stepper, a plan-mix donut and legend, an invoice status list and a paginated transactions list. Amounts are numbers formatted through Intl, and every colour comes from a lookup keyed by plan or status, so no Tailwind class is stored in the data.
npx shadcn@latest add https://hirael.com/r/dashboard-03.json04 / 06|Inset stat tiles · progressbar budget · sr tables
Commerce operations dashboard in a card-in-card style: four inset stat tiles, a Today band pairing an hourly two-series revenue chart with ad-budget and peak-hours cards, and a week-in-review band driven by a range select. The budget bar is a real progressbar, both charts ship a screen-reader data table, and each panel only shows an action when it has one.
npx shadcn@latest add https://hirael.com/r/dashboard-04.json05 / 06|Bordered lattice · live accent · latency targets
Observability dashboard composed as one bordered lattice: greeting strip with range select, four sparkline KPI cells, cache and duration chart cells, an AI-insight callout, a P50/P95/P99 latency distribution measured against a stated target, and an active-deployments list. The deployment taking traffic gets --accent-cool, the reserved live tone, and its pulse respects prefers-reduced-motion.
npx shadcn@latest add https://hirael.com/r/dashboard-05.json06 / 06|Stat cards · runs chart · breakdown panel
Pipeline overview dashboard: four stat cards for success, failure, skipped, and live activity, a clickable latest-runs bar chart with a run breakdown panel, and a recent-runs list. The active-now stat uses --accent-cool for live state; every other color is a design token, so it works in light and dark.
npx shadcn@latest add https://hirael.com/r/dashboard-06.json