Sidebar Dashboard Shell
Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.
Stat rows, chart cards, activity feeds and admin shells.
A dashboard answers "is anything wrong" in under three seconds and "why" in the next thirty. That means the top row is comparisons rather than raw numbers — a figure with no baseline is trivia — and the charts sit below it. These are the shells and the tiles; they take your data and your chart library rather than bundling one.
Sidebar, top bar and scrollable content slot, with a mobile drawer that closes on Escape and marks the active route.
Metric row where each card knows whether a rise is good news, so churn going up is red while revenue going up is green.
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.
KPI cards with a hand-built SVG trend line — no charting dependency for a path this file computes in twelve lines.
Categorical bars in plain CSS with gridlines, hover values and a screen-reader table carrying the real numbers.
A year-over-year trend in inline SVG with a printed axis, no charting dependency and the same data repeated as a screen-reader table.
A funnel that leads with the step-to-step rate and the people who fell out of it, not the tidy share-of-top percentages nobody can act on. Biggest drop named in words, and a footnote saying which definition of funnel this is.
Recent-events list with typed icons and relative timestamps that keep the absolute value in a <time> element.
Breadcrumb, title, action buttons and a counted tab row that sits flush with the bottom rule.
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 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.
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.
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.
Consumption against plan limits, with warning thresholds, honest overage display and unmetered quotas that do not fake a bar.
Where a total went, drawn as one conic-gradient ring with the total in the hole and every number repeated in the legend.
A year of daily activity as one square per day, bucketed against a quantile so a single outlier cannot flatten the scale.
Alert thresholds with their current distance from firing, so a quiet alert is visibly armed rather than possibly broken.
The top-of-dashboard figures, each carrying the comparison period that makes a delta mean anything.
The moving price rail that sits under an exchange’s navbar — direction carried by an arrow and a sign as well as by colour, and the duplicate half dropped rather than read twice.
Number rows, KPI tiles, trend deltas and counters.
Sortable grids, bulk selection, filters, pagination and row actions.
App shells with navigation, tables, settings and detail screens.
Top bars, mega menus, mobile drawers and app sidebars.
Dropzones, progress lists, image pickers and paste-to-upload.
Bento grids, alternating rows, icon lists and tabbed showcases.