Skip to content

Collection · components

Dashboard starter kit

KPI cards, tables, charts and the empty states between them.

51 match this filter · showing 10

Rule behind this list: The pieces a data screen is made of, so a dashboard starts assembled instead of improvised.

Featured member

Odometer Counter

Rolling mechanical digit wheels for numbers that deserve drama — live counts, price tickers, follower milestones. Wheels roll to the target with blurred neighbours for depth.

a11y 96 · Q 97 · 2.4 KB · the filter put it first

showing 10 of 10 members

animated2.4 KB

Odometer Counter

Rolling mechanical digit wheels for numbers that deserve drama — live counts, price tickers, follower milestones. Wheels roll to the target with blurred neighbours for depth.

a11y 96·Q 97·890 copies
section3.2 KB

Counter Stats Band

Numbers that count up when they enter the viewport, with a hairline ledger behind them. The accounting-style baseline keeps the counting from feeling gimmicky.

a11y 98·Q 96·980 copies
section1.8 KB

Bento Feature Grid

Asymmetric feature tiles around one live centrepiece — a mini revenue chart whose pace knob redraws the SVG forecast, in calm or festive accent modes.

a11y 95·Q 96·540 copies
section1.4 KB

Pricing Table — Three Plans

Studio / Team / Agency with a monthly-yearly toggle that re-prices all three in place — the popular plan glows but never blocks the other two.

a11y 96·Q 96·660 copies
section1.5 KB

Hero with Product Mock Frame

The dev-tool hero: headline beside a browser-chrome frame whose mini dashboard ships real numbers — bars grow in, tokens, a11y and runtime tiles read at a glance.

a11y 96·Q 96·590 copies
animated0.6 KB

Status Ping Dot

Three severities; only 'degraded' pings — 'ok' holds still, because calm computing means motion is a signal, not a default. Text labels do the real work.

a11y 98·Q 96·129 copies
element0.8 KB

Meter with Thresholds

A gauge with named thresholds drawn as rules on the track and a text value beside it — role=meter carries the number the bar suggests.

a11y 98·Q 96·137 copies
animated0.9 KB

Donut with Center Label

Pure SVG donut whose arc draws itself once — the percent lives as text in the center and in the aria-label, so the visual is a courtesy.

a11y 98·Q 96·155 copies
element0.9 KB

Sortable Table (aria-sort)

The full sorting pattern the catalog tables were missing — aria-sort on the headers, state announced, sort stored where a link can carry it.

a11y 99·Q 96·149 copies
section3.6 KB

Momentum Chart Card

A live-feeling analytics card: bars rise on entry with per-bar stagger, legend explains the two series, and the whole card stays legible at 300px wide.

a11y 96·Q 95·890 copies

Bundle estimate

17.1 KB

upper bound — sum of members

Accessibility

95

lowest member score

Last updated

2026-09-12

newest member publish date

Members

10

of 51 matches

Collections are URLs, not saved state — copy the address bar and send it. The rule above explains membership, so nobody has to guess why an item is in or out.

All collections →