Sidebar Dashboard Shell
Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.
All blocksProduct
Dashboards
9 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.
A block is one finished section of a page — a pricing table, a hero, a footer.
KPI Cards With Deltas
Metric row where each card knows whether a rise is good news, so churn going up is red while revenue going up is green.
Activity Feed Panel
Recent-events list with typed icons and relative timestamps that keep the absolute value in a <time> element.
Page Header With Tabs
Breadcrumb, title, action buttons and a counted tab row that sits flush with the bottom rule.
Kanban Board Columns
Four columns of prioritised, tagged, assigned task cards with a blocked state — the board as a layout contract, leaving drag behaviour to your own state and library.
Audit Log Timeline
Events grouped by day on a vertical rail, icons varying by type and one entry expanded into a detail card — what keeps forty events scannable instead of forty gray dots.
Saved View Tabs
Saved views with the third state most implementations drop: a shared view with unsaved edits, where Save changes what a colleague sees tomorrow. Two honest buttons instead of one, ownership on the tab, and dirty said in words.
Comparison Period Picker
A reporting window with the comparison window spelled out beside it — resolved dates, UTC arithmetic, and an option to align weekdays so a weekend is never compared against a Tuesday.
Alert Rule List
Threshold alerts with the two facts most rule lists omit: how often each has fired, and whether its channel is muted — so a rule that is on but delivering nowhere reads as its own state.