Skip to content
38

Dashboard.

Dashboard screens composed from stat cards, charts and data tables, built with real components rather than static images.

6 blocks, live at full size, install from here

01 / 06Tabs range, intent-aware deltas, keyboard chart

Dashboard 01

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.json

02 / 06Area chart, sparkline KPIs, sr data table

Dashboard 02

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.json

03 / 06Donut plan mix, real pagination, month stepper

Dashboard 03

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.json

04 / 06Inset stat tiles, progressbar budget, sr tables

Dashboard 04

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.json

05 / 06Bordered lattice, live accent, latency targets

Dashboard 05

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 is marked in the primary color and its pulse respects prefers-reduced-motion.

npx shadcn@latest add https://hirael.com/r/dashboard-05.json

06 / 06Stat cards, runs chart, breakdown panel

Dashboard 06

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 the primary color for live state; every color is a theme token, so it works in light and dark.

npx shadcn@latest add https://hirael.com/r/dashboard-06.json