Collection · components
Start here
The components that teach the catalog's conventions.
Rule behind this list: Hand-picked once, then maintained: each entry demonstrates a convention — tokens, states, keyboard — and the editorial picks carry their own reasons.
Featured member
Toast Queue
Accessible toasts that slide in over the corner with per-message auto-dismiss countdown bars, a per-toast dismiss control, an undo action and a batch cap of three on screen. Test it: ping a few in a row.
a11y 98 · Q 96 · 4.8 KB · aria-live done right
showing 10 of 10 members
Toast Queue
Accessible toasts that slide in over the corner with per-message auto-dismiss countdown bars, a per-toast dismiss control, an undo action and a batch cap of three on screen. Test it: ping a few in a row.
Combo Box
A text input with a live-filtered option list, full keyboard navigation (arrows, enter, escape) and an honest no-match row. The filter control that belongs on every catalog page.
Toggle with Label Stack
An iOS-style switch that ships with a title plus a description row, because a preference without context is a trap. Every switch announces state and the whole row is the target.
Upload Progress Ring
Circular upload progress drawn as an SVG arc with a cancel control and a stalled-state warning in amber — the failure becomes visible instead of a frozen spinner that lies.
Empty-state Trio
The empty-state pattern from the Learn essay, shipped: three cards (inbox / dashboard / saved stack) where a verb headline, a sub-minute next step and an escape hatch turn 'nothing here' into onboarding.
Live Region Lab
A working aria-live lab: polite vs assertive announcements, a visually hidden announcer you can reveal, and a log of what screen readers actually hear.
Back-to-top Comet
A floating action that appears once you're two screens deep and eases you back up with a smooth scroll. Appears with a translate+fade, never blocks content.
Skeleton Profile Card
A shimmering profile placeholder — avatar, name and body bars — that swaps to the real content once 'loaded'. Includes a replay control so you can watch the handoff repeatedly.
Bundle estimate
18.5 KB
upper bound — sum of members
Accessibility
95
lowest member score · 2 keyboard-first
Last updated
2026-09-09
newest member publish date
Members
10
of 10 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 →