Components

A rule on the line token, so the one place needing it does not hard-code a colour.

The five container recipes - card, tile, field, sunken, floating - instead of a drifting radius/border/shadow class string.

The whole type scale as one component. Without it every screen re-types the sizes by hand, which is where drift starts.

Mark plus name lockup; the mark itself is a slot.

A CSS grid with a column count per breakpoint or a minimum card width that auto-fills, plus GridItem spans that still mean full when columns change.

The inline link: ink text on an accent underline, new-tab links with an arrow, hidden notice and safe rel, router rendering through as.

Cuts the middle of a long string to the measured width and keeps the end, such as the extension; screen readers, tooltip and clipboard get the full value.

Sizes one line of text to exactly fill its container, between a min and max, refitting on resize and when web fonts load.

Justifies a paragraph with Knuth–Plass line breaking over measured widths and Liang hyphenation, re-laid out on resize or font change.

Focus containment and restore, written once. Every dialog, drawer and menu in the library shares it.

Renders into a node outside the current tree. Modal, Drawer, Toast, Popover and ContextMenu all need it.

Keeps a node mounted long enough to animate out, and owns the timers so its callers do not have to.

Hidden until focused; depends only on the focus tokens.

Text for screen readers only. Every icon-only control needs one.

Screen reader announcements through useAnnounce, polite or assertive, with repeated messages spoken again and old text cleared after a delay.

Wraps search matches in accent-tinted marks, ignoring case and accents, matching each word on its own and treating regex characters literally.

Catches a render error in its subtree and shows a fallback, with retry, resetKeys that clear it when the input changes, and an onError hook.

An app-wide shortcut registry: useHotkey with a platform-aware mod key, sequences like g i, scopes a dialog can take over, conflict warnings and a live list.

Puts one section on a theme of its own: accent, base colour, radius, font and style, reapplied as the mode or the page’s theme changes.

Mounts children only when they near the viewport, holding their space until then; can unmount again when far away, and mounts at once without support.

Shows content as seen with protanopia, deuteranopia, tritanopia, achromatopsia, blur or low contrast, using Machado 2009 matrices in SVG filters.

Arrow keys move focus to the nearest focusable element in that direction by on-screen geometry, leaving inputs and sliders their own keys.

An ICU MessageFormat parser and formatter — plural, ordinal, select, offset — with plural forms from Intl.PluralRules and errors at their position.

Elects one leader tab with Web Locks and passes messages over BroadcastChannel, with a panel showing this tab’s role, its peers and the log.

useUrlState keeps typed state in the query string, with push or replace, debounced writes, Back and Forward, and several keys in one history entry.

The floating rounded window on a tinted canvas; full-bleed below xl.

The mixed-span card grid the overview page lays out.

A titled container with an optional action and a body slot - the shape most content ends up in.

Title block with actions, for secondary routes.

A hero strip: headline, highlighted phrase, supporting link, call to action, and a slot for artwork.

Two panes and a divider that moves by pointer or arrow key, announced as a splitter with its position.

Holds a box to a ratio before its media loads, with CSS aspect-ratio and object-cover, so thumbnail grids never jump as images arrive.

Flex row or column with gaps on the spacing scale, direction that can change per breakpoint, and dividers that sit centred in the gap and turn with it.

The centred page column: width presets from the site shell and its own gutters, so pages line up with the header. ContainerBleed runs a child to the edge.

position: sticky that reports when it has pinned, through data-stuck, a class or a render prop, watched by a sentinel with no scroll listener.

List and detail side by side when wide, one pane at a time when narrow, with focus sent to the detail heading and back to the row.

Widgets rearranged by dragging a handle or with Space and the arrow keys, each move announced, and resized from one to four columns.

Margin notes aligned with their markers and pushed down to avoid overlap; in a narrow container they become inline toggles next to the marker.

IDE-style docking of tab groups in resizable splits: drag a tab onto a centre or edge, every action also from the keyboard, as a serialisable tree.

A set of Collapsibles with single- or multi-open policy.

Height transition primitive for disclosure.

Collapse + a trigger.

Clamps long text to a few lines, and only offers to show more when there is more to show.

Shows the first few items and a Show all button that moves focus to the first revealed item.

The equal-height card band.

Scroll-snap track + chevrons; the card band below xl.

A carousel with depth. One transform per card from its signed distance, with stacking order taken from the absolute one.

Four faces on one cube. The whole cube turns, so the corners never come apart, and the rotation accumulates.

An exploded isometric stack. Two rotations on a shared parent, so the plates stay coplanar and every label is real text.

Looping horizontal scroller.

Cards that stick and pile up as you scroll. CSS does the stacking; one measurement a frame supplies the depth.

A named, focusable scroll region with thin scrollbars and edges that fade only while there is more content past them, on either axis or both.

Tiles of mixed height packed into columns set by its own width, kept in source order so what you see matches the reading and tab order.

Loads more as the end comes into view, with a real Load more button as the fallback, the new count announced, and a retry when loading fails.

Keeps scroll panes in step by proportion or by matching anchors, ignoring its own echoed scrolls so panes never feed back.

Tiles that swell towards the pointer as one curve, measured from the wrapper so the growth never feeds back into itself.

The application header: brand, primary navigation, tools and an account control.

Full-width navigation column with grouped sections.

The 42px icon rail with a pinned footer group.

Surface + IconButton cluster. The header utility group.

A floating button that appears past a threshold, returns to the top instantly under reduced motion, moves focus there, and can show a progress ring.

A slim top bar for route loads that trickles, finishes and fades, skips fast routes and holds still for reduced motion.

A single row of links that moves whatever does not fit into More, keeping the current page in view as the width changes.

In-page link list with scroll-spy.

IconButton + Text, wired to history.

Text + Divider trail with an overflow rule.

Tabs whose indicator measures and slides between them. SegmentedControl cross-fades a background; this one travels.

ButtonGroup + IconButton with a page-window algorithm.

Numbered progress through a flow; StatusDot + Text + Divider.

Tabs laid out for a bottom bar.

SegmentedControl + panels with correct tab semantics.

Previous and next links with direction labels and titles, in a named nav. A lone link keeps its own side.

An A–Z rail that jumps to a letter’s group and moves focus to its heading; empty letters stay in place, disabled, and touch users can drag along it.

Modal + Combobox + Kbd over a command registry.

Menu opened at the pointer, via Portal.

Menu with a trigger and keyboard navigation.

Surface(floating) + Button; owns open state, outside-click and Escape.

Actions fanned on an arc, equally far from the pointer, or stacked as a speed dial off a floating button, with menu-button keyboard support.

A File / Edit / View bar that follows the WAI-ARIA menubar pattern: one tab stop, arrow keys across and down, submenus, checkable items, Escape returns focus.

Site navigation that opens wide panels of grouped, described links, built as a disclosure with hover intent, one panel at a time and Escape to close.

Languages in their own words with English second, a lang attribute on each, a globe trigger and a filter once the list gets long.

Docs version picker with Latest, Pre-release and Deprecated tags, plus a notice on old pages that links to the latest version.

Search with a scope picker inside the field and suggestions limited to that scope; typing in:issues sets the scope, and Enter searches with it.

Recently viewed docs, files and projects with time ago, pin, remove and clear, optionally saved to storage so it survives a reload.

Ctrl or ⌘+F for one container: counts matches, steps with Enter, paints them with the CSS Custom Highlight API and opens closed details around a match.

fzf-style fuzzy scoring that picks the best character placement and highlights it, responsive across ten thousand items.

A client-side inverted index with Porter stemming, BM25 ranking, title boost, prefix matching and marked snippets, updated in place.

A filter-syntax search field parsed into a tree, with recognised filters as inline chips, schema completion for keys and values, and errors by column.

A native button plus token classes.

Segmented Buttons sharing one border and roving focus.

Puts a value on the clipboard and announces it - a glyph turning into a tick tells a screen reader nothing.

Glyph-only button; the label is non-visual, so it is required.

The nav pill track — a single-select ButtonGroup.

On/off toggles in a row, each a real aria-pressed button. Unlike SegmentedControl, having none pressed is allowed.

A single button that stays pressed, announced with aria-pressed, with Button’s variants and sizes, an optional icon swap and a label that never flips.

One button from idle to progress ring, done and retry, with a cancel control, the file size in the label and each state change announced.

Toggle heart that updates at once and rolls back if saving fails. The count shows as 1.2k but is read out in full; no burst under reduced motion.

Continue-with buttons for six providers with single-colour marks, stacked or as an icon row, a last-used hint and a spinner on the one pressed.

Upvote and downvote toggles with the score between; the vote shows at once and rolls back if the save fails; vertical or horizontal.

A Follow toggle that reads Following and shows Unfollow only on hover or focus, while the accessible name stays the same; optional follower count.

A destructive action held rather than clicked. Spread commitment beats a dialog dismissed by reflex.

Button that tracks the pointer.

The icon-over-label action row from the balance card, with optional keyboard shortcuts shown on the controls rather than hidden in a help page.

A call to action with a sheen sweeping across it and a light that follows the pointer, written to CSS variables rather than to state.

A primary action with its alternatives beside it - two buttons with two names, not one button with a hot zone.

Hands off to navigator.share where it exists, otherwise a menu with copy link (confirmed in words) plus email, X, LinkedIn and Facebook links.

A toolbar that floats above selected text; Alt+F10 moves focus into it, arrows move between buttons, and Escape returns focus.

A bar that slides up while a form is dirty, with Discard that asks first, Save with a pending state, Ctrl+S or ⌘S, and an announcement.

A menu that adds an event to Google, Outlook.com, Office 365 or Yahoo, or downloads a correctly escaped .ics, with the event details shown first.

A microphone button that types recognised speech into a field at the caret, showing unfinished words as a hint; a message where the browser can’t.

Reads text aloud with the browser’s voices and highlights each word as it is spoken, with adjustable speed and voice.

Text that becomes a field on request: Enter saves, Escape restores, and focus returns to where it was.

Wraps a native input; no label or validation opinions.

A row of single-character Inputs with paste and focus movement.

An @-mention list positioned at the caret, measured through a hidden mirror of the textarea.

Input + reveal IconButton.

A Meter and a rule checklist that say, in words, what would make a password stronger.

A keypad and the physical keyboard as one control, where rejection is the return value rather than a ref reaching in.

Input + icon adornment + clear affordance. The header search.

Input + Chip list.

Multi-line sibling of Input, sharing its chrome.

Dial-code select joined to a national number that formats as you type, stored as one E.164 string, with a small overridable country list.

A postal address as autofill-ready parts, relabelled per country (State, County, ZIP code, Postcode), with an optional suggestions slot for your provider.

A field that finishes the sentence in faint text after the caret: Tab takes all, Ctrl+→ one word, Escape dismisses; async requests debounced and cancelled.

Native input with a drawn box; no layout or label of its own.

Checkbox + Label + Field; owns the shared name and value array.

Select + Input filtering.

Select + Chip list for the selected values.

A native radio with a drawn dot. Grouping and layout belong to RadioGroup.

Radio + Label + Field; owns roving focus.

A radio group drawn as stars.

Menu + Button trigger with listbox semantics. The currency pickers.

Native checkbox presented as a track and knob.

Radios or checkboxes drawn as cards with title, description, icon and price, on real inputs so arrow keys and forms just work.

Two filterable multi-select lists with move and move-all buttons, full keyboard marking and announced counts.

Pick one or many from a hierarchy in a popover, with the tree keyboard model, a filter that opens matching branches, and tri-state parents.

Side-by-side columns from country to region to city in a popover; pointing or the arrow keys open the next level, and children can load on demand.

One colour from a named palette as a radio group, each swatch announced by name, with a tick that picks black or white ink for contrast.

A survey matrix of statements against one scale, a labelled radio group per row, that turns into cards in narrow containers and shows progress.

A long checkbox list with a filter, select all with a mixed state, a selected count and a selected-only view, rendering only the rows in view.

Size, colour and material checked against real SKUs; a dead-end option is disabled and says why — not made in this combination, or out of stock.

A venue map from data with price tiers, a seat limit, arrow keys from seat to seat, a running total, and an optional rule against a single empty seat.

Ranks a list by asking which of two matters more, using binary insertion to ask the fewest questions, with ties, skip, undo and arrow keys.

Currency symbol + bare Input + currency Select, as Exchange Money uses twice. Keeps parsing and formatting in one place.

A rating where the face is the readout and the word is the aria-valuetext, because the number is an implementation detail.

A rotary control dragged vertically, not circularly — an angular drag spikes whenever the pointer crosses the centre.

Input + step controls; shares Slider’s clamping.

Two Slider thumbs sharing one track.

Native range input restyled against the track tokens.

A number joined to a unit picker that converts the value when the unit changes, with limits per unit and arrow-key steps (Shift for ×10).

Latitude and longitude in any common notation, flagging out-of-range values, read back in words, with distance and bearing to a reference point.

Month grid with keyboard date navigation.

Calendar in a Popover, wired to a Field.

DatePicker with two linked endpoints.

Time selection in a Popover.

A 4×3 month grid with year stepper, min and max, optional range mode and calendar-style arrow keys; works inline or in a Popover.

Day strip plus a grid of time slots with taken times struck through, radio semantics and the timezone always shown.

One field for a date and a time: type YYYY-MM-DD HH:mm or pick from Calendar and TimePicker, with whole-moment limits and the time zone shown.

Hours, minutes and optional seconds as spinbuttons, stored as seconds; arrows carry between units, and 1h 30m types or pastes straight in.

Seven day toggles in the locale’s order with Intl names, plus Weekdays, Weekends and Every day shortcuts that follow the locale’s weekend.

Two linked time pickers: the end always follows the start, moving the start keeps the length, and the duration is shown, with an optional overnight mode.

Repeat rules by day, week, month or year with end conditions, read back as a plain sentence and returned as an RRULE string.

A date field that reads next fri 3pm or in 2 weeks, shows its reading before committing, offers the other fair readings, and keeps a calendar beside it.

Cron edited field by field with errors in place, described in words, with the next runs in any time zone and daylight-saving shifts flagged.

Area, hue and alpha controls in a Popover.

A crop frame in fractions, not pixels, so it survives a resize. One box-shadow dims everything outside it.

Drop zone, file list and progress.

Records the next combination pressed, swallowing every key including the ones the browser wanted.

Freehand with speed-varied width, smoothed through midpoints. Strokes are points, so undo and resize both repaint.

Card number, expiry and CVC as one control: detects brand, groups digits, checks Luhn and moves between parts as you type.

Searchable emoji grid with category tabs and recents, a built-in set of about 200 named emoji, and grid arrow-key navigation.

Markdown with a formatting toolbar, Ctrl or ⌘ with B, I and K, and a preview built as React elements, so raw HTML and unsafe links stay inert.

A profile photo you click or drop an image onto, with type and size checks stated in words, an optional square crop, and preview URLs revoked when replaced.

A code textarea with a synced line gutter, Tab and Shift+Tab indenting, auto-indent, paired brackets, and Esc then Tab to leave the field.

WYSIWYG writing with headings, lists, quotes and links, a toolbar that follows the caret, its own undo history, and HTML sanitised by allow-list, paste included.

A spreadsheet formula bar with a real parser: errors point to the exact character, functions complete, the current argument is marked, and it evaluates.

A cubic-bezier curve shaped with draggable, keyboard-movable handles and presets, with a live preview dot and the cubic-bezier() string ready to copy.

Take a photo in the page with a live camera preview, a device switch, clear permission states, and retake or use before the still is handed over.

Record voice notes with a live input level meter, pause and resume, a length limit, playback and discard, returning the audio and its real duration.

Time subtitle cues against the playing media, with the current cue highlighted, overlaps flagged, and WebVTT and SRT import and export.

A pen tool for SVG paths: corner and smooth anchors, curve splitting that keeps the shape, keyboard nudging, and normalised path data in and out.

A writing field that grades itself live: Flesch scores and inline marks for hard sentences, passive voice, adverbs and plainer words.

Label + control + hint + error, with the id wiring in one place.

Chip and Select row with a clear-all action.

Field layout and submission state; no validation library baked in.

Form label on the type scale; owns the htmlFor association only.

The digest that takes focus when a submission is rejected — the only pattern that makes an error below the fold perceivable.

Joins text, icon, button or select addons to an Input with one shared border, radius and focus ring; passes Field wiring through.

Repeating rows of fields with add, remove and move; focus goes somewhere sensible after every change, and each change is announced.

A working form drawn from a JSON Schema with the library’s own fields and validated against that schema, so onSubmit only gets a value that passes.

Throttled IndexedDB autosave that offers a newer draft back with a summary of what changed, schema migration, and a memory fallback.

Initials, tint and accessible name from one string.

Overlapping Avatars with an overflow count.

Short qualifier attached to something else.

Selectable or removable pill. Interactive counterpart to Tag.

The rounded glyph plate at the start of a list row or a stat tile.

A keyboard key. Pure typography and border tokens.

Static outlined label. Non-interactive counterpart to Chip.

A person at a glance: cover, avatar, name as a real heading, bio, labelled stats and links, with a compact row variant for lists.

A transaction feed grouped by day with sticky headers and rows that expand in place, so the reader keeps their position.

Appears once rows are selected: how many, what can be done to them, and a way out - announced as it changes.

A whole list screen — search, filters, sortable table and all four data states — wired together once.

Table + sorting, selection, pagination and column state.

Text + Divider term/definition pairs.

Column layout with drag and drop.

Layout wrapper owning row rhythm and separators.

IconTile/Avatar + Text; the subscriptions and transactions row.

Semantic table styled on the line and surface tokens.

StatusDot + Divider + Text event sequence.

Recursive disclosure with full tree keyboard semantics.

Renders only the rows in view, so ten thousand items cost a few dozen nodes and are still announced as ten thousand.

File rows with a type glyph, readable size and date, upload progress or the error in words with Retry, optional selection and a row menu.

Nested rows under shared columns, with treegrid semantics, the tree keyboard model, expand and collapse all, and parent totals rolled up from leaves.

A spreadsheet-style grid: arrows move, typing or Enter edits, Enter commits down, Tab across, Escape restores, with a check on every cell.

A ranking with shared ranks for ties, movement arrows, an optional podium for the top three, and your own row pinned when outside the top N.

A log tail with level chips and filters, highlighted search, copy per line, and a follow mode that pauses when you scroll up, across thousands of lines.

Records turned into a pivot you configure — row and column fields, value, sum, count, average, min or max — with nested headers and subtotals.

Text + Badge: a label, a figure and a delta.

A KPI rail where selecting a tile drives a detail chart — the summary-then-detail dance every analytics screen reinvents.

Surface(tile) + IconTile + Metric + Meter. The instalment tile.

A row of headline metrics split by hairlines, each with a value, a change against the last period, an inverse option and a sparkline.

Inline change like +12.4% or −3 pts: the arrow follows the sign, the inverse option only flips the colour, read aloud as up 12.4 percent.

Who changed what, when, and what it was before — the field every implementation drops first.

Surface(sunken) + monospace scale + copy action.

What is about to change, per field, before submitting. Cleared and newly set are their own facts.

Two-column CodeBlock with change highlighting.

A payload as a collapsible tree in the code palette. Collapsing hides a branch; it never truncates a value.

A sensitive value that is not in the DOM until revealed, hides itself again, and separates copy from reveal.

"3 minutes ago", phrased by Intl in any locale and kept current, over a real time element with the exact moment.

Average stars, total and a 5→1 distribution whose bars are pressed-state filters, so the place you spot the 2-star reviews is where you open them.

Photo with a hover second shot, sale or new badge, struck-through old price, radio swatches, a wishlist toggle and an add-to-cart that reports its own result.

Ordered → delivered as an ordered list with aria-current, step times, estimated delivery, and the tracking number one press from the clipboard.

A month of events as chips on fixed-height days, with +n more opening the whole day, date-grid keys and a Monday or Sunday week start.

Upcoming events grouped under sticky day headings, named Today and Tomorrow, with empty days skipped and a now line through today.

One snippet in tabs such as npm, pnpm and yarn, with copy, and a storage key that makes one choice switch and stay on every block.

A seven-day hour grid with side-by-side overlaps, an all-day row, a now line and week paging, with events walked by arrow keys.

A print-ready receipt that adds up line items, discounts, shipping and tax itself, shows the payment method, and has a slot for print and download.

Git history with branch lanes worked out from parent hashes: merge curves, refs and tags on each commit, and a list you move through with Up and Down.

Bytes as offset, hex and ASCII with one shared selection, only the visible rows rendered, go-to-offset, arrow-key selection and copy as hex.

Untrusted email in a sandboxed frame with no scripts, remote images blocked until allowed, quoted replies folded and the frame sized to its content.

TeX-like source turned into native MathML — fractions, roots, scripts, Greek, sums, integrals, matrices, text — with errors in place and a text fallback.

One 24-hour strip with a row per city and DST-correct offsets from Intl; drag or arrow keys to pick a window, shown in every zone and copyable.

Measures blocks onto A4 or Letter pages with margins, keep-with-next and breaks, a running header and footer with page X of Y, and prints as previewed.

A structural JSON diff with records matched by id so moves read as moves, a change list of JSON Pointer paths and a side-by-side folding tree.

A JSONPath evaluator with recursive descent, slices, unions and filters parsed without eval, results by path and marked in the document tree.

Streamed terminal output with 16, 256 and truecolour styles, progress bars that redraw in place, safe links, and colours that follow the theme.

Reads a JPEG’s EXIF — camera, exposure, date, GPS in decimal — and strips it byte-for-byte without re-encoding, verified before download.

Opens a ZIP in the browser from its central directory as a keyboard tree, inflating one entry at a time with CRC-32 checked.

A booking grid of rooms or people against time: drag to book, move or resize, with snapping, overlap rules, a now line and keyboard use.

Single or double knockout brackets from a seeded list, with byes placed by seeding, winners advanced from scores, and a grand-final reset.

Image + Text caption.

Encoded matrix rendered as SVG. The QR quick action.

A main image with a thumbnail tablist, arrow keys, previous and next buttons and a counter; clicking opens Lightbox on the same image.

A video with labelled controls under the picture — seek, volume, captions, speed, full screen — and shortcuts that only work while focus is inside.

Spoken audio with play, seek, time and speed, a waveform that doubles as the seek bar, and a chapter list that marks what is playing.

A timed transcript that highlights and follows the line being spoken, seeks on click, pauses following when you scroll, and searches in place.

A true 360° photo viewer drawn in WebGL: look around by dragging, pinching or with the arrow keys, and zoom by changing the field of view.

A loupe that follows the pointer, a finger or the arrow keys over an image and shows the detail under it, enlarged.

Shows a blurred colour impression decoded from a short hash while the real image loads, then fades the image in.

Pixel-by-pixel comparison with a perceptual threshold, the share changed, and side by side, diff overlay, onion skin and blink views.

Exposure, contrast, saturation, white balance, levels and per-channel tone curves on real pixels, with a live histogram and a spline that never overshoots.

Crop suggestions per aspect ratio that keep the subject, scored by edges, skin tone and colour on a rule-of-thirds search, then adjustable by hand.

Finds the page in a photo, lets you correct the corners, and flattens it with a true perspective warp and an optional scan look.

An image’s dominant colours by median cut and k-means, with share, hex, OKLCH and contrast-safe text, copied as CSS variables.

A WebGL viewer for binary and ASCII STL and OBJ with its own parsers, fit-to-view, quaternion arcball rotation, wireframe and bounds.

Records a canvas or element to an animated GIF with its own encoder: median-cut palettes, dithering, LZW and looping.

LineChart with a filled band.

Categorical bars sharing the chart scaffolding.

Axes, scales, Legend and ChartTooltip.

A line that scrolls as samples land. One CSS transition per sample, and a scale that eases towards its bounds.

Inline SVG trend line; no axes, no chart runtime.

X against Y with optional bubble size and a least-squares trend line, one tab stop with arrow keys to step through points in x order.

Floating bars from a starting value, with subtotals and totals computed rather than typed, so the bridge always adds up.

Each item’s change between two moments as one line, with labels at both ends nudged apart, rise and fall tones, and focus that fades the rest.

Two values per category as dots joined by a bar, so the gap is what you see, with optional sorting by the biggest change.

Stacked Progress bars for part-to-whole comparison.

ProgressRing with a scale and a value readout.

Stephen Few’s bullet graph: a measure, its target and its range in one row, shaded in ink so it still reads in greyscale.

Concentric rings that each fill toward their own target or a shared one, labelled at the start, with the total in the centre and a legend.

Ranked horizontal bars as a real list - top pages, top referrers - the chart every dashboard actually needs.

One bar split into its parts, with unused capacity and an optional limit marker. Lengths, not angles.

Part-to-whole arcs with a centre readout.

A turning sphere of dots with places marked on it. A golden-angle spiral, because a lat/long grid bunches at the poles.

Several measures at once as a shape. Per-axis maxima, so measures on different units can share one outline.

Raw values counted into bins with round edges, plus optional mean and median markers, because on skewed data the gap between them is the finding.

Quartiles, whiskers at 1.5 IQR and each outlier as its own dot, from raw values or a given summary, vertical or horizontal.

A rows-by-columns grid on a stepped accent scale, with a legend, cell tooltips, printed values that stay readable, and arrow keys in two dimensions.

Causes sorted largest first with a cumulative share line on its own axis, a dashed cutoff, and the long tail muted rather than dropped.

Every observation as a dot on one axis, packed so none overlap, in rows per group with a median line and a highlighted point.

One axis per measure, one line per record: brush a range on any axis, drag or arrow the headers to reorder, and see how many records are left.

Two or three sets with circle areas and overlaps solved to scale, exact counts in every region, and hover or arrow-key highlighting.

Words sized by weight and placed on a seeded spiral so none overlap, with optional vertical words and an accessible list ordered by weight.

Clicks summed into a Gaussian heat layer on canvas, coloured from theme tokens, over whatever was clicked, with the hotspots named in words.

GeoJSON regions shaded on a stepped scale, Mercator or equirectangular projections fitted to the frame, and arrow keys to the neighbouring region.

2D kernel density traced with marching squares into filled bands, each named by the share of points it holds, over an optional scatter.

Per-group KDE violins with Silverman bandwidth, median and quartiles inside, an optional box and jittered points, vertical or horizontal.

Fifty thousand points counted into hexagons with a stepped count scale, a live bin-radius slider, a legend and a per-bin tooltip.

Conversion through ordered steps: each bar against the start, each gap as the share that continued.

Where an amount comes from and goes, as ribbons whose thickness is the amount. Columns by longest path, so nothing flows backwards.

Part-to-whole by area, squarified so no tile becomes a sliver. Shows a long tail a donut cannot.

Hierarchical data as concentric rings, with click-to-zoom into a branch, a breadcrumb back up, labels where they fit and arrow-key tree navigation.

Nodes and links laid out by a built-in force simulation that settles and stops, with draggable nodes, neighbour highlighting and a list of connections.

A top-down reporting tree of people cards with collapsible teams, elbow connectors, pan and zoom, and full tree keyboard support.

Two-way flows between groups as arcs and ribbons from a computed chord layout; hover or arrow to a group to fade every flow it is not part of.

Sequence diagrams written as text — participants, replies, notes, alt and loop blocks, activations — with errors by line number and a numbered text version.

Collapsed stacks folded into a flame or icicle graph with zoom and breadcrumb, search with the matched share, and a differential view against a baseline.

Flows written as text or data and laid out in ranks automatically, with few crossings, loops allowed, pan, zoom and fit, and keyboard walking along edges.

Hierarchical clustering drawn as a tree, with a cut line you drag to choose the groups and the data matrix reordered beside it to match.

A two-sided mind map built from the keyboard: Tab adds a child, Enter a sibling, arrows move spatially, and it exports as an outline.

A calendar density grid. It answers a question no chart here answers well: when did this happen, across months, at a glance.

A day of events with overlaps resolved by cluster and first-fit columns, positioned from minutes.

The uptime strip, from measured ratios or declared statuses with incidents, and missing data drawn as its own state rather than as an outage.

OHLC candles, hollow when up and solid when down as well as coloured, with a volume pane and a crosshair that prints the price.

Tasks as bars on a scrolling calendar by lane, with progress fills, dependency arrows, milestone diamonds, a today line and day, week or month zoom.

The SaaS retention triangle as a real grid, with accent-shaded cells, a size-weighted average row, a percent or users switch and arrow-key navigation.

Series stacked around a centred wiggle baseline with smooth edges; hover to isolate a stream and see every value, with legend toggles.

100k+ sample series drawn through LTTB at pixel width, with an overview brush, zoom, pan and reset, and a tooltip that reads the raw nearest sample.

A Holt–Winters forecast with fitted weights, a widening prediction band, a history and forecast split, and MAPE on the fit and a held-out horizon.

An XmR process control chart: moving-range sigma zones, Western Electric run rules ringed and explained, and limits recalculated per phase.

Kaplan–Meier survival curves with censor ticks, Greenwood bands, median markers, an at-risk table and a log-rank p-value across groups.

A distributed trace as a span tree on a shared time axis, with self time, the critical path marked, collapsible rows and a span details panel.

Tooltip specialised for a data point.

StatusDot + Text series key, shared by every chart.

Metaballs: blur the group, then push alpha through a steep contrast curve so overlapping edges fuse.

Spinner over a scrim, scoped to a container.

Discrete, counted progress - eight pips of which three are filled, rather than a continuous bar.

Continuous bar, for values that are genuinely fractional.

The same value drawn as an arc, for square slots.

Geometry plus a shimmer; no knowledge of what it stands in for.

Leaf consumed by Button and IconButton.

A token-coloured circle.

Every upload in one panel: per-file progress, pause, resume, cancel and retry, overall progress by bytes, clear completed, and a collapsed pill.

Four rising bars for connection quality with an optional quality word, announced as one image: Signal: good, 3 of 4 bars.

Surface + IconTile + Text; a persistent message block.

A product announcement as a block or a thin strip across the top, with a badge, a link, and dismissal remembered per announcement.

The compact form of Alert, for use under a Field.

The panel behind the bell, with a real unread model announced through a badge rather than by colour.

Portal-mounted queue with timers and a live region.

Planned downtime in the reader’s own time zone with a countdown, turning to in progress and then completed by the clock, dismissed per window.

Surface + IconTile + Text + Button.

EmptyState with a retry action and error semantics.

One component for the four states every data region has. Every list rebuilds this branch, and each rebuild forgets one — usually the empty case.

A 404 body that offers every way out: a large code, a search slot, the pages people usually meant, back and home, with the heading level set by prop.

A 403 body that names what you tried to open, who owns it and which account you are using, with a request access button that becomes a sent state.

Offline, reconnecting, and what is still queued. navigator.onLine is the default, not the authority — a dead API reads as online.

Time remaining, in tiles - a silent timer role rather than a live region that talks every second.

How much of a quota is gone and when it returns — recomputed from a deadline, so a throttled tab cannot drift.

The changes that have not landed, with the backoff shown — a countdown is what stops everyone fighting the retry.

What autosave is doing, and when it last succeeded — the timestamp is what turns “Saved” into a claim.

The idle warning, with activity shared between tabs and a deadline held as a timestamp, so a sleeping laptop cannot cheat it.

One incident’s updates newest first, with severity, affected components, and a duration that says Ongoing for until it is resolved.

A background job as a step checklist, with the current step and elapsed time in the header, a retry on the failed step, and a collapsible list.

A new version prompt that asks rather than reloads: reload now, snooze for a while or skip until the next version, announced politely.

Says why before the browser asks, follows the Permissions API state, and gives the steps for the reader’s own browser when a permission is blocked.

A countdown to a service target that counts only business hours in a time zone, handling holidays, pauses and clock changes, and saying why it is paused.

Overshoot on the landing, and the shine sweeps after it — overlapping them wastes both.

Canvas celebration burst.

A flame that only flickers once today is banked, and keeps its final number when the streak ends.

Animated confirmation tick.

The overflow is the point: fill to full, snap to zero with the transition off, continue. Otherwise the bar sweeps backwards.

Drawer anchored to the bottom, for touch.

Modal with alertdialog semantics and a forced choice.

AlertDialog with a standard confirm/cancel pair.

Modal anchored to an edge. The mobile navigation panel.

Full-screen images with arrow keys, swipe and a spoken position, built the way Modal is.

Portal + FocusTrap in a centred Surface.

A card that expands into a dialog from exactly where it sits, as a FLIP transform, so nothing relayouts mid-flight.

Every shortcut on one screen, grouped by area and opened with ?, with a filter and keys drawn for the device: ⌘ on a Mac, Ctrl elsewhere.

Asks for one value, like a rename or a new folder: opens with the text selected, checks as you type, submits on Enter and keeps a failed save open.

What’s new, one highlight per page with media and a step indicator, shown once per version and remembered in storage, with a quiet opt-out.

Fills the screen on phones and is a tall sheet on desktop, with close and save in the header, a scrolling body and a question before discarding changes.

Popover on hover intent rather than click.

Positioned Surface(floating); the shared anchor logic.

Surface(floating) + Text; replaces the native title on icon-only controls.

An are-you-sure anchored to its trigger: focus lands on Cancel, Escape or an outside click backs out, and an async confirm stays pending and shows the error if it fails.

An info button that opens an explanation on click, Enter or Space and announces it. Unlike Tooltip it never needs hover and can hold links.

A preview card shown after a short hover or focus, from props or an async loader; the link stays a normal link and the card never takes focus.

A non-modal panel dragged by its title bar or moved with arrow keys, kept inside the viewport, able to minimise, and reporting where it was left.

Pops a live React subtree into an always-on-top Document Picture-in-Picture window with the page’s styles, and back, without losing state.

A guided tour that cuts a hole in the scrim over each target, scrolls it into view and anchors an explanation to it.

Pointer-following highlight over a surface.

A pulsing dot on a new control that explains itself in a small popover, saves Got it through a callback and holds still under reduced motion.

An onboarding checklist behind a button that shows progress on the trigger, folds finished steps away and marks completion with a quiet tick.

Route-level enter and exit, built on Presence.

Scroll-linked depth for a page region.

Scroll-triggered entrance for a page region.

How far through a page or container the reader is, measured once a frame and reported as a progressbar. Pair it with BackToTop for the way up.

Skew, drift and squash driven by how fast you are scrolling, eased so a wheel burst reads as weight.

Sequences Reveal across a list.

Rows animate in when added and fold away when removed, matched by key. Focus moves off a leaving row, and nothing animates under reduced motion.

Scrollytelling: text steps scroll past a sticky visual that follows the step being read, stacking on narrow screens and under reduced motion.

Preloads frames and scrubs them on a pinned canvas as you scroll, with object-fit maths, a loading bar and a still frame under reduced motion.

A card that opens like a pop-up book: parallel folds and V-folds solved from the opening angle, so paper figures rise and stand in real 3D.

Zoom forever: each scene holds the next and the last holds the first, on a log-scale camera that wraps by the scale factor, so the dive never ends or drifts.

RGB channel tear that is clean ninety per cent of the time — and only one of the three copies is readable.

A gradient sliding across live text. Duplicated end to end so the loop has no seam, and the glyphs stay selectable throughout.

Per-character animated headline.

Cycles a word inside a headline.

A passage whose words light as it scrolls. Scroll-linked rather than triggered: the reader sets the pace and can scroll back.

Character-scramble text reveal.

Text that types, deletes and moves on. Announced once as static text, with the width of the longest phrase held open.

A hand-drawn underline, highlight, circle or box drawn in behind real text as it scrolls into view, tinted from the accent; already drawn under reduced motion.

A band of light sweeping across real, selectable text for Thinking… states, plain under reduced motion or when paused.

Text set around a circle with a centre slot for a button; it turns slowly, pauses on hover or focus, and screen readers hear the phrase once.

Headline words that melt into each other through a blur-and-threshold filter; the word list is read once, and reduced motion keeps the first word.

A curved connector between two real elements with light pulsing along it. It re-measures, so it survives a reflow.

Three drifting colour fields behind a container. Only transform animates, so a full-bleed hero holds 60fps where an animated filter would not.

An organic outline on two unrelated sine frequencies, joined by Catmull–Rom, so it never repeats and never flattens.

Light travelling round a border: one spinning conic gradient behind an inset opaque surface, so it holds at any aspect ratio.

Trading-card foil. The rainbow runs against the tilt, because real foil reflects a fixed light.

Glass that actually refracts: a blur, a specular rim, and an SVG displacement map that bends only the edge.

Three stacked glows rather than one blur, and a flicker that clusters its dropouts like a real tube.

Items travelling a circle, each counter-rotating so it stays upright — the detail that stops logos arriving upside down.

A drifting constellation on a canvas, linked and pointer-reactive. Canvas, because the link pass is quadratic over positions.

Water. Every drop keeps its own birth timestamp, so six ripples overlap correctly instead of restarting each other.

A corner that lifts, casts a shadow on the sheet below, and comes off if you pull past the threshold.

Decorative streaks falling diagonally behind content, pausing off screen and becoming faint fixed streaks under reduced motion.

A background grid or dot pattern with a few cells softly lighting up in the accent, faded at the edges, and static under reduced motion.

A WebGL fragment shader background fed the theme’s colours, time and pointer; pauses off screen, reports compile errors, falls back to a gradient.

Drag a lamp across the page and the real elements cast true shadows, computed as a visibility polygon with a soft penumbra from jittered sample lights.

Rain beads, merges and runs down the pane, wiping the fog; every drop is a little lens showing the scene behind it upside down.

The frame becomes a window into a room behind the screen: off-axis projection shifts the view as you move, and props lean out through the frame.

A beam through glass you can turn: Snell’s law per wavelength with Cauchy dispersion, so white light fans into a real spectrum, and past the critical angle the beam reflects instead.

Snow that lands on the page’s own elements: every flake settles on the heightfield above the real headings and cards, piles up, avalanches when the slope is too steep, and blows off when you sweep the pointer.

Tweens between two values. Owns an animation frame loop.

AnimatedNumber triggered on entering the viewport.

Digit-roll presentation of AnimatedNumber.

Split-flap board presentation of a value.

Continuously updating value strip.

A cursor with mass that becomes the rectangle of whatever it hovers, and hides the real pointer while it does.

Two-faced Card with a flip transition.

Press-down scale feedback wrapper.

Pointer-origin ripple wrapper. Owns transient state.

Pointer-tilted Card.

Shakes, pulses or bounces its child when a trigger value changes, or from a ref; under reduced motion it flashes an outline instead.

Dismiss and the live element breaks into Voronoi shards that spin and fall where you hit it; undo flies every shard back and hands the real thing back.

Two states split by a handle. The top layer is clipped, not resized, so nothing reflows during the drag.

Drag a rectangle to select. Items are found by attribute and measured once, at the start of the drag.

A scaled survey with the on-screen part outlined and draggable. Takes content coordinates, so it knows nothing about transforms.

A viewport you pan and zoom, anchored to the pointer. One affine step, so a minimap or a hit test on top stays tractable.

Drag past a threshold to reload, but only from the very top — the rule that stops it stealing an ordinary scroll.

Drag to reorder, with rows measured once on grab. Space picks a row up and the arrows move it, announced through a live region.

The segmented bar above a story. Re-keyed on the index, which is what makes a re-entered segment actually restart.

A stack of cards thrown left or right, with pointer capture for the gesture and arrow keys for everyone not holding a pointer.

A row that slides aside to reveal actions that are always real buttons — focusing one opens the row.

A box with right, bottom and corner handles that are focusable separators, with limits, arrow keys, and Shift to keep the shape.

A slide-to-confirm track that springs back if released early, with a keyboard route (End, or hold Enter or Space) plus pending and done states.

A drop target that appears only while files are dragged over, checks type and size with a reason for every refusal, and always offers a choose-files button.

A phone-style unlock grid where dots crossed by the line join automatically, with a minimum length, success and error states, and a full keyboard route.

Nodes with typed ports joined by wires you drag out; type mismatches and loops are refused with a reason, and every port has a keyboard menu.

Rectangles, ellipses, arrows, text and a pen on SVG, with geometry hit-testing, resize handles, marquee select, undo and JSON or SVG export.

A virtual analogue stick returning a normalised vector and angle, with a dead zone, 4- or 8-way D-pad modes and arrow or WASD keys.

Drag a hierarchy into shape: up and down for position, sideways for depth, subtrees travel with their parent, and the keyboard does it all too.

Calibrate from a known length, then measure distances, areas and angles on an image in real units, with editable points and keyboard placement.

A move, resize and rotate frame that keeps the opposite corner fixed on rotated boxes, with Shift for proportions and Alt to resize from the centre.

Boxes that snap to each other’s edges and centres while dragging, showing distances and equal-spacing marks; hold Alt to place freely.

Draw a gesture and it is recognised, scored and mapped to an action; it learns new gestures from one drawing, and each gesture is also a button.

Who is here, in a stable order a join cannot reshuffle, with arrivals announced rather than only drawn.

Other people’s pointers, glided between sparse updates by a CSS transition, positioned in fractions so a resize is free.

Reactions with counts and a burst on pick. A toggle, not an increment, so a double tap cannot leave two likes.

Three dots and a sentence that is actually grammatical — one, two and many are three different shapes.

Results hidden until you vote, and each row is its own bar, so the label stays legible as the fill passes it.

Messages grouped by sender and time, with day dividers and delivery ticks. Follows new messages only while you are at the bottom, otherwise offers a jump.

A growing chat input: Enter sends, attachments are removable chips, a character counter, and send is blocked while empty or already sending.

Threaded comments with a depth cap, inline reply and edit, reactions, delete with a confirm, collapsible replies and a resolve toggle.

Numbered pins on an image with a note each, placed by click or a keyboard crosshair, stored as percentages so they stay put at any size.

Live Q&A with anonymous asking, upvotes, top or newest sorting, pinned and answered states, host moderation and politely announced new questions.

Other people’s carets and selections drawn inside a textarea from offsets, measured with a mirror and moved through your own edits.

A video-call layout that solves rows and columns for the largest tiles, with speaker ring, muted, hand-raised and camera-off states, and pinning.

Ranked-choice results round by round: eliminations, where ballots went, exhausted ballots, tie-breaks, and the full count as a table.

Comments pinned to a quote, not an offset: they re-anchor by exact then fuzzy match with a confidence score, and orphans are listed openly.

A textarea bound to an RGA sequence CRDT, so peers can edit offline or out of order and still converge, optionally across tabs.

Browser-to-browser text and files over WebRTC, with copy-paste or BroadcastChannel signalling, back-pressure and SHA-256 checks.

A presentation with keyboard, a URL per slide, fullscreen, an overview grid and a presenter window synced over BroadcastChannel.

Parallel sign-off against a quorum, not a stepper. One rejection ends it however many approvals are in.

Granular consent where rejecting is exactly as easy as accepting, and every recipient is named.

When this data was last true, and whether that is still good enough. A failed refresh makes it older, not wrong.

Column-to-field matching that guesses first, previews real values, and catches clashes while the file is still on screen.

Shows a region to those who may see it and explains the refusal to those who may not. Silence is opt-in.

Undo and redo with the steps named, plus a history to jump back through. Leaves a focused field’s own undo alone.

Invite by email with a role, change or remove access from one menu, and set link access with copy; the owner can never be removed.

Document versions grouped by day, with a named-only filter, preview on select, compare with current, and restore after a confirmation.

Suggested edits from a word-level Myers diff shown inline, each accepted or rejected alone or all at once, with arrow keys between changes.

A diff3 merge of base, ours and theirs: clean changes merge themselves, conflicts get ours, theirs, both or edit, and git markers otherwise.

Finds emails, phones, Luhn-valid cards, mod-97 IBANs, keys, JWTs and IPs, and redacts only what you approve, before and after side by side.

An image redrawn as characters, downscaled by the browser and mapped through a ramp ordered by ink.

Separation, alignment, cohesion — on a spatial grid, so two hundred boids is hundreds of checks and not forty thousand.

Falling glyphs where the trail is accumulated residue, not a list of characters anyone tracks.

A perspective divide and nothing else, with streaks drawn between each star now and last frame.

Conway’s Life on a canvas with play, step, clear, randomise and speed, drawing by mouse or keyboard, pausing off screen, and theme-aware colours.

Particles drift along a seeded noise current and leave trails in theme colours, pausing off screen and holding a still frame under reduced motion.

Drifting seeds and their exact Voronoi cells on canvas, tinted from the accent and drawn towards the pointer; a still frame under reduced motion.

Mandelbrot and Julia sets on a canvas, rendered in cancellable chunks across frames; drag, wheel and keys to fly, and a click picks the Julia constant.

Real-time stable fluids on the GPU: push the dye with a finger and the smoke keeps swirling after you let go, in colours drawn from the accent.

Gray–Scott chemistry on feedback textures: coral, fingerprints and dividing cells grow across the canvas, and a headline can be the seed they grow from.

Ebru marbling done exactly: every drop pushes the ink already on the bath outwards by the closed-form circle map, and a tine drag shifts it along a decaying wake, so no pattern is ever painted — it is displaced.

Voxel-space terrain flown from a heightmap generated by diamond–square: back-to-front column casting with a y-buffer, so a ridge line resolves per pixel with no polygons at all.

A real FFT from a real element or the microphone, trimmed to the part of the spectrum with anything in it.

One oscillator per note with a ramped envelope, because a gain that jumps to 1 is a click.

The bar visualiser, with a playhead. One scaleY keyframe per bar rather than a frame loop writing heights.

A Web Audio metronome with slider, number field, tap tempo, time signatures and an accented first beat, booked ahead on the audio clock.

A chromatic tuner that listens through the microphone and shows the note, octave and cents off on a needle, with adjustable A4.

Cut a clip from an audio file in the browser: a real decoded waveform, draggable or keyboard handles, preview playback and WAV export.

A parametric EQ of real biquad filters: draggable bands, the combined curve from getFrequencyResponse, a live spectrum, presets and bypass.

BS.1770-4 loudness: K-weighted momentary, short-term and gated integrated LUFS, true peak and loudness range, with meters and a history.

Offline tempo detection: spectral-flux onsets from an STFT, autocorrelation with octave checks, beats drawn on the waveform and tap-to-verify.

Sand on a ringing plate: nothing draws the figure — each grain hops as hard as the plate moves beneath it, so the pattern forms itself and re-forms on a new note.

The result is decided first and the tumble is arranged to arrive at it, not read off wherever it stopped.

Real elements that fall and stack, separated along the smaller overlap so the pile does not slide apart.

Verlet integration: velocity is implied by position, which is what makes the constraint pass so simple.

Reels that land on a chosen result and stop left to right, because the stagger is the whole drama.

A prize or decision wheel that picks the winner first, by weight or from the server, then slows onto it; announced, and instant under reduced motion.

The real card — its own text and working buttons — hung on a verlet mesh: it drapes, ripples in the wind, and tears if you pull too hard.

A black hole you drag across a working interface: real elements fall toward it on an inverse-square pull, stretch along the line to it, turn with its spin and are swallowed at the horizon — then spring back, still interactive, when it moves on.

A drop of magnetic fluid that grows Rosensweig spikes towards the pointer: a metaball field whose surface tension loses to the field, so the spikes stand, wobble and merge back.

A falling-sand cellular automaton where a headline is the sand: letters crumble grain by grain, water finds its level, fire eats wood, and a sweep of the pointer pours more.

Drag magnets across the page and thousands of filings turn to the dipole field they actually sit in, with field lines traced by Runge–Kutta from the poles.

Fifteen pendulums whose lengths are tuned so the slowest swings sixty times a minute and each next one once more: they fan, snake, split into two waves and return to one line, on a cycle that closes exactly.

Leaves with two faces, the back mirrored, and z-index taken from distance to the current spread.

A grid of buttons with interpolated strokes, storing palette indices rather than colours.

A cover erased with the pointer to reveal what is under it, with a real button beside it, because a gesture is not an interface.

History that preserves the half-typed draft, and a real input under the caret so IME and paste behave.

Card-matching pairs on a keyboard-navigable grid, with moves, a timer and spoken matches. Cards change face in place under reduced motion.

Noughts and crosses against a friend or a minimax computer, with arrow-key grid focus, squares named by position and mark, and a highlighted winning line.

Generated puzzles with a checked unique solution, pencil notes, live conflicts, hint, check and timer, in a grid naming each cell’s row, column and box.

Real minesweeper: safe first click, flood reveal, flags and chording, three presets, and a one-tab-stop grid where arrows move, Enter reveals and F flags.

The fifteen puzzle at any size with parity-checked shuffles only, whole-row slides, arrow-key play, a move count and an optional painted picture.

A crossword from data, numbered automatically: type to fill and advance, clue lists that follow the cursor, check or reveal a letter, word or puzzle.

Snake on a fixed-step tick with buffered turns, walls or wrap, three speeds, swipe, auto-pause when the tab is hidden, and a saved best score.

Chess with every rule — pins, castling, en passant, promotion, all the draws — plus SAN, FEN and PGN, and full keyboard play with spoken moves.

2048 with tiles that keep their identity, so slides and merges animate; one merge per tile, undo, best score, arrows, WASD and swipe.

A five-letter word game with correct duplicate-letter scoring, hard mode, daily or random words, a stateful keyboard and an emoji share grid.

Klondike with draw one or three, undo, scoring, a timer, auto-send and finish, drag or full keyboard play, and every card named in full.

Fling a planet and watch it fall into orbit: velocity Verlet n-body gravity with real conic trails, collisions that merge and conserve momentum, and a readout of the energy it is not allowed to lose.

A four-dimensional solid turned in two planes at once: rotate in xw and yw, watch the inner cube swell through the outer as it passes, and switch the projection from perspective to stereographic.

The closing ask at the foot of a page, on the banner radius. Accent copy uses the derived accent-ink, so a deep brand colour gets white text.

Benefit-led features with glyph, name, one sentence and a “Learn more” that carries the feature name for assistive tech.

Announcement, promise, two actions and the product, on the display type scale. PromoBanner is an in-app card; this is the first screen of a site.

Customer marks flattened to one tone, as a row, a hairline grid or a marquee — each exposed as an image named for the company.

Eyebrow, display title and lede — the opening of every landing-page section, held to one measure so eight of them in a row do not drift.

The site map: column titles as real headings, legal row, social links named for their network.

The marketing top bar. Navbar is the signed-in app header; this is links out and a sign-up, transparent over the hero until the page scrolls.

A quote with the person attached, as figure, blockquote and figcaption — the only structure that says whose words they are.

Marketing FAQ with category filters, search across answers, hash links that open and focus a question, a contact area and optional FAQPage JSON-LD.

Email capture as a card or inline row, with optional consent, check-your-inbox, already-subscribed and error states, and a hidden trap field for bots.

Monthly or yearly, with the saving pinned beside the control rather than inside it, so the track never jumps.

The plan-by-feature matrix as a real table with row and group headers — and one plan at a time on a phone, instead of a sideways scroll.

One plan: price, the action directly under it, then the list. Excluded features are announced as excluded.

Plans behind a period switch. The yearly saving is computed from the plans, and the annual total that actually leaves the account is shown.

A usage-based estimate with a slider and number per metered item, graduated or volume tiers, a breakdown, a yearly toggle and talk to sales past a limit.

The frame for sign in, sign up, reset and invite: providers, the rule, the form, the way out — and the error announced at the top.

Multi-step setup that validates each step in place, revisits only completed steps, and moves focus to each new step’s heading.

The “get set up” card. Steps are props, so it advances when work is done elsewhere; optional steps never hold completion hostage.

Check your inbox with a masked address, webmail links, resend with a countdown, change email, a code as an alternative, and a verified state.

An authorisation screen with publisher verification, the signed-in account with a switch, plain-language scopes with sensitive ones first, and the redirect host.

Order lines, promo code, tax and what is due today — plus what is charged after today. Card entry is left to the provider’s hosted field.

Billing history with Pay now in the row of any due or failed invoice, and downloads named for their invoice.

A saved card whose expiry is worked out, not displayed — and a default card that cannot be removed out from under a subscription.

Current plan, status, and the one date that matters next. A failed payment is a warning with the fix inside it, not a badge.

An upsell as a card, a top banner or inline where a gated feature would be, with a trial countdown derived from a date.

Entitlements over a billing period — seats, storage, MAUs — with unlimited and over-the-limit as their own states. RateLimitMeter is the rolling window.

Paid seats with a typed stepper that stops at seats in use, the new total, and today’s prorated charge with the arithmetic shown.

Honest cancellation: an optional reason, an offer that matches it, then a confirm listing what is lost and when access ends. The way out is never hidden.

Splits costs equally, by shares, exact amounts or percentages in whole cents, then settles with as few transfers as matching finds.

Paste a column of addresses, pick a role, see what it costs. Bad, duplicate and existing addresses are caught as chips before sending.

People, roles and removal, enforcing the rule most team screens forget: a workspace can never lose its last owner.

Roles against permissions as a checkbox matrix, every box named for its intersection, locked roles shown rather than hidden.

The account menu behind the avatar: identity above the menu rather than in it, settings, and a sign-out that is always last.

The multi-tenant switcher: a listbox in a popover with arrow keys, a check on the current one, search past six, and Create.

Pending join requests with the requester’s note. Change the role before approving, deny with a reason, or select several at once.

Create, list and revoke keys. The secret is shown once in a dialog that cannot be dismissed by accident; the list shows prefix and last use.

Product updates as a changelog page or a compact “What’s new”, with anything newer than the last visit marked new.

Irreversible actions fenced off, confirmed with type-to-confirm, with any failure kept on the row that caused it.

Search the docs, jump to resources, check system status, and reach a person — offered right at a dead-end search.

One marketplace tile with exactly one next step per state — Connect, Configure, Reconnect or Upgrade — and a broken connection shown as broken.

A settings block with its own save bar that knows when something changed, plus SettingsRow for the label-and-switch lines.

The delivery log: every row opens to the exact payload and response, timeouts are their own outcome, and failures retry in place.

Webhook endpoints with three states, not two: an enabled endpoint answering 500 is shown as failing, with its last response, on its own row.

Events by channel as a grid of labelled checkboxes, an all box per channel with a mixed state, a digest frequency, and a draft held until you save.

Flags with a switch per environment, a rollout slider, a stale marker and search. Turning one on in production asks first; turning it off never does.

Custom domain setup: DNS records to copy, a check result on each record, SSL status, and removal that asks first.

Language, region, searchable time zone and format overrides, with a live preview line formatted through Intl and a draft saved on demand.

Logo and brand colour with a live preview themed by applyAccent on the preview only, a label contrast check, reset, and a save or discard draft.

An API reference drawn from an OpenAPI 3 document, with $refs resolved safely and a working curl command built for every operation.

Chrome, Node, Firefox, Safari and Python traces parsed into frames, library frames folded away, source shown around each line and the raw trace kept.

This page’s LCP, CLS, INP, FCP and TTFB measured live the way field data does, rated against Google’s thresholds and naming the element responsible.

Its own checks on the live page — missing names and alt text, heading jumps, tabindex, contrast, duplicate ids — numbered on the elements concerned.

Live matches with numbered and named groups, the pattern explained token by token, and patterns that could hang flagged and time-boxed in a Worker.

Splits a pasted curl command the way a shell would, applies curl’s flag rules, and writes fetch, axios and Python code, listing anything unconverted.

Tests versions against an npm range with npm’s prerelease rule, showing what the range expands to, which versions match and the highest.

An SLO error budget with burn-down, burn rate, time to exhaustion and multi-window burn-rate alerts evaluated over the whole series.

Field, operator, value rows joined by all or any, with operators by type — plus matchesFilters, so table and builder agree on meaning.

Named filter sets above a table, with the unsaved state made explicit: save over it, save as new, or put it back.

Request an export by dataset, format and date range, then follow it from queued to ready, with download links and an expiry countdown.

A card per column with inferred type, missing values, distinct count, statistics, a histogram, and flags for mixed types, outliers and empty columns.

An A/B/n readout with Wilson intervals, lift, p-values, the sample size for your minimum lift, and a one-sentence recommendation.

An RFC 4180 parser read in chunks with progress, sniffing the delimiter, header and column types, and listing bad cells by line before import.

A schema-aware query builder that finds joins along foreign keys, suggests GROUP BY and writes quoted PostgreSQL or MySQL as you go.

Groups raw log lines into templates with the Drain parse tree — numbers, IPs and ids masked, counts and variable slots per template, incremental on a live tail.

Finds duplicate records with blocking, Jaro–Winkler and token-set scoring and union-find clusters, then reviews each merge with per-field survivorship.

The first-visit consent prompt where Reject all is exactly as easy as Accept all. Opens ConsentManager for the detail.

A face, a sentence and send. Either half is enough; the faces are real radios announced by their word.

The offer first, then the invite link with copy and share, progress to the next reward in words, and each invited friend with their status.

The 0–10 question as real radios, a follow-up that changes with the score, a thank-you state and dismiss — as a card or inline.

A public roadmap in Planned, In progress and Shipped, with instant vote toggles, comment counts, a tag filter, sort by votes, and tabs on small screens.

Flashcards on the SM-2 schedule: a due queue, graded reviews with next-interval previews, retention stats and a review forecast.

Where the account is signed in, with location and IP, the current device pinned, and sign-out of everything else.

SAML set up in real order — our values, theirs, test, enforce. Enforcement stays locked until a test passes against exactly the values on screen.

Scan, confirm with a code, keep the recovery codes — Done stays locked until the codes are stored, because a lost phone is a locked account.

An IPv4/IPv6 and CIDR allowlist that validates and normalises entries, confirms enforcement, and asks before the admin’s own IP gets locked out.

Answers whether a user can act on a resource by showing each step: groups, inheritance, every rule checked and which deny beat which allow.

Checks WebAuthn support, creates a real passkey with options from your server, and lists passkeys to rename or remove after a confirmation.

Reviews a Content-Security-Policy by severity and shows what each resource type allows after default-src fallback, striking ignored sources.

Decodes and explains a JWT with live expiry countdowns, verifies HS, RS, PS and ES signatures with Web Crypto, and flags alg none.