UI Patterns
A UI pattern library built for coding agents. 40 patterns, each shipping a copy-paste prompt that rebuilds it inside your own codebase — plus a live preview and the source behind it.
Every pattern, three ways.Five categories — data display and interaction carry most of the weight. Added in five batches since 11 August 2026.
- Preview
- The pattern running live in an isolated frame, in whichever theme you are reading in.
- Source
- Its markup, styles and behaviour, plus a single runnable file carrying its own palette.
- Prompt
- A written spec that rebuilds the pattern from scratch — including why each decision is the way it is. Paste it into Claude Code, Cursor, or any coding agent.
The prompts are the point. Each one is written to survive being handed to an agent with no other context: it names the surfaces the pattern belongs on, spells out the constraint that makes it work, and calls out the failure it exists to prevent. Nothing here is a dependency you install.
The catalogue
40 patterns
No patterns match that search.
Try a shorter term, or clear the filters to see all 40.
| No. | Pattern | Category & tags | Added |
|---|---|---|---|
| 01 | Windowed schedule gridRows of resources against a fixed time window, where each block is sized by its overlap with the window rather than by its own duration. | Data displayschedule, timeline, grid, flexbox, time | Added 2026-08-11 |
| 02 | Benchmark progress barPlaces a raw figure on a scale of external benchmarks instead of printing it plain. | Data displayprogress, benchmarks, css-only, data-viz, empty-state | Added 2026-08-11 |
| 03 | Cross-highlight matrixA two-axis lookup table with both headers sticky, hover lighting the full row and column at once, and a durable click-to-pin selection for touch. | Data displaytable, matrix, sticky, accessibility, hover | Added 2026-08-11 |
| 04 | Left-truncating pathsShortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart. | Data displaytruncation, paths, text-overflow, breadcrumbs, file-systems | Added 2026-08-11 |
| 05 | Shape-mark sequence UpdatedA sequence compressed into a row of small marks whose shape carries the state. | Data displaystepper, sparkline, series, truncation, css-only, no-assets | Added 2026-08-21 |
| 06 | Linked month barsA month-by-month volume timeline built from plain divs where every aggregate row links to the filtered view that produced it. | Data displaytimeline, drill-down, css-only, data-viz, no-assets | Added 2026-08-21 |
| 07 | Glass vial meterA vertical potion-vial meter whose liquid fills a wide bulb first and then rises into a narrow neck — all CSS, no images. | Data displaymeter, skeuomorphic, css-only, reduced-motion, no-assets | Added 2026-08-21 |
| 08 | Partitioned stage barProgress for work with several possible endings, drawn as a census rather than a fraction. | Data displayprogress, stacked-bar, batch, legend, status, aria-label | Added 2026-09-12 |
| 09 | Term-by-term derivationA computed figure shown with the audit trail behind it — the number is the product and the derivation is the receipt. | Data displayexplainability, calculator, disclosure, formula, tabular-nums, details | Added 2026-09-12 |
| 10 | Plan preview tree UpdatedA dry run shown as a before-and-after tree with counts now, after, and the difference. | Data displaydry-run, diff, tree, preview, bulk-operation, confirmation | Added 2026-09-12 |
| 11 | Uniform slot shellOne card shell many independent sources render through, where the shell does the capping. | Data displaydashboard, widgets, cards, empty-state, error-state, grid | Added 2026-09-12 |
| 12 | Object-shaped cards UpdatedWhere a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients. | Layoutcards, css-only, gradients, variations, no-assets, skeuomorphic | Added 2026-08-11 |
| 13 | Adaptive tile mosaicA container with no artwork draws one from up to four member tiles, grid tracks following tile count. | Layoutcss-grid, css-only, no-assets, cards, layout | Added 2026-08-11 |
| 14 | Ground-scrimmed artwork UpdatedText printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed. | Layoutlayout, css-only, gradients, contrast, no-assets, hero, cards | Added 2026-08-11 |
| 15 | Hairline stat strip UpdatedStat tiles joined by hairlines that are grid gap, not borders. | Layoutstats, css-grid, css-only, hairline, no-assets | Added 2026-08-21 |
| 16 | Annotated transcriptConversation bubbles with a speaker-colored spine and a fixed metadata gutter. | Layoutconversation, gutter, status-roles, contrast, css-only | Added 2026-08-21 |
| 17 | Cork notice boardPinned paper notes on a cork board where every texture is layered CSS gradients. | Layoutskeuomorphic, gradients, no-assets, cards, css-only | Added 2026-08-21 |
| 18 | Hotspot marker layer UpdatedMarkers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow. | Layouthotspots, pointer-events, aspect-ratio, container-query, overlay, responsive | Added 2026-09-12 |
| 19 | Line-art empty statesInline drawings for empty surfaces stroked in the inherited text colour. | Layoutempty-state, svg, currentcolor, illustration, aria-hidden, no-assets | Added 2026-09-12 |
| 20 | Column-flow wallCards flowing down columns instead of across rows, with the reading-order cost stated plainly. | Layoutmasonry, columns, break-inside, reading-order, cards, responsive | Added 2026-09-12 |
| 21 | Scroll edge shadowsAn inset shadow shown only on the edge that has more content behind it. | Interactionscrolling, affordance, lists, overflow, progressive-disclosure | Added 2026-08-11 |
| 22 | Frozen-batch deckA one-card-at-a-time review queue whose batch is snapshotted at mount. | Interactionqueue, review-flow, animation, keyboard, reduced-motion | Added 2026-08-11 |
| 23 | Controls beside the anchor UpdatedPer-card controls over a fully-linked card without nesting interactive elements in the anchor. | Interactioncards, accessibility, keyboard, focus-within, grid | Added 2026-08-11 |
| 24 | Pluggable canvas visualizer UpdatedOne canvas, a registry of draw modes, each mode owning its entire frame. | Interactioncanvas, visualization, registry, animation, reduced-motion | Added 2026-08-11 |
| 25 | Roving-grid board UpdatedA dense grid of state cells that is one tab stop with arrow-key navigation. | Interactionkeyboard, roving-tabindex, accessibility, states, dense-data | Added 2026-08-21 |
| 26 | Section railSticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup. | Interactionnavigation, toc, responsive, aria-current, intersection-observer, container-queries, sticky | Added 2026-08-21 |
| 27 | Ledge-press buttonsButtons on a solid ledge shadow that travel down onto it when pressed. | Interactionbuttons, skeuomorphic, press, tokens, css-only | Added 2026-08-21 |
| 28 | Guarded control UpdatedA blocked control stays focusable, carries the reason as text, and refuses in its handler. | Interactionaria-disabled, disabled, preconditions, keyboard, aria-describedby, forms | Added 2026-09-12 |
| 29 | Polled job card UpdatedOne card for every state a background job passes through. | Interactionprogress, polling, background-job, indeterminate, aria-busy, reduced-motion | Added 2026-09-12 |
| 30 | Entry-transform motionFLIP-style motion between two rendered states when the old DOM is already gone. | Interactionanimation, transitions, reflow, reduced-motion, navigation, layout-effect | Added 2026-09-12 |
| 31 | Slot-first picker UpdatedAssignment that starts at the destination slot, then narrows the catalogue. | Interactionassignment, picker, aria-pressed, filtering, forms, data-driven | Added 2026-09-12 |
| 32 | Undo toastA destructive action with no confirm dialog, held behind a toast and committed when it expires. | Formsundo, toast, destructive, aria-live, reduced-motion | Added 2026-08-28 |
| 33 | Blast-radius confirm NewA confirm dialog that names everything a delete cascades and blocks dismissal while it runs. | Formsconfirm-dialog, destructive, cascade, dialog-element, forms | Added 2026-09-28 |
| 34 | Batch action bar UpdatedA bar that exists only while something is selected, states the count in words, caps at five actions. | Formsselection, bulk-actions, toolbar, checkbox, indeterminate, bulk-edit, mixed-values | Added 2026-08-28 |
| 35 | Filtered to zeroThe three empty states a list actually has, written as three different screens. | Formsempty-state, filter, search, zero-results, aria-live, copywriting | Added 2026-09-12 |
| 36 | Parsed query chipsA search box that echoes back how it read the text as removable chips. | Formssearch, query-syntax, chips, facets, parsing, aria-live | Added 2026-09-12 |
| 37 | Compound-value pickerOne grouped select whose value carries both the kind and the id. | Formsselect, optgroup, polymorphic, forms, dependent-fields, keyboard | Added 2026-09-12 |
| 38 | Ground-referenced color UpdatedColors solved against the page's own ground token so they invert correctly between themes. | Colorcolor, contrast, color-mix, accessibility, wcag, theming, year-map | Added 2026-08-11 |
| 39 | Single-property color variants UpdatedOne custom property carries the hue; border, fill, spine and dot derive from it. | Colorcolor, color-mix, custom-properties, theming, data-attributes, badges | Added 2026-08-21 |
| 40 | Controls on an unknown fill UpdatedOpaque controls, a gradient-darkened fill, and a two-tone focus ring on a surface whose colour arrives from outside. | Colorcontrast, brand-color, focus-ring, opacity, wcag, theming | Added 2026-09-12 |