A1 · Pattern library

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.

A blueprint drawing of interface parts: dialled gauges, dimensioned panels, and a grid of repeated tiles

Picture 1

Every pattern, three ways

B · Preview

Preview

The pattern running live in an isolated frame, in whichever theme you are reading in.

C · Source

Source

Its markup, styles and behaviour, plus a single runnable file carrying its own palette.

D · Prompt

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.

All patterns

Sort by any header · filter by category

All 40 patterns in curated order. Buttons in the column headers sort the table.
					Tags
1	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 display	—	2026-08-11	schedule timeline grid flexbox
2	Benchmark progress barPlaces a raw figure on a scale of external benchmarks instead of printing it plain.	Data display	—	2026-08-11	progress benchmarks css-only data-viz
3	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 display	—	2026-08-11	table matrix sticky accessibility
4	Left-truncating pathsShortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.	Data display	—	2026-08-11	truncation paths text-overflow breadcrumbs
5	Shape-mark sequenceA sequence compressed into a row of small marks whose shape carries the state.	Data display	Updated	2026-08-21	stepper sparkline series truncation
6	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 display	—	2026-08-21	timeline drill-down css-only data-viz
7	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 display	—	2026-08-21	meter skeuomorphic css-only reduced-motion
8	Partitioned stage barProgress for work with several possible endings, drawn as a census rather than a fraction.	Data display	—	2026-09-12	progress stacked-bar batch legend
9	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 display	—	2026-09-12	explainability calculator disclosure formula
10	Plan preview treeA dry run shown as a before-and-after tree with counts now, after, and the difference.	Data display	Updated	2026-09-12	dry-run diff tree preview
11	Uniform slot shellOne card shell many independent sources render through, where the shell does the capping.	Data display	—	2026-09-12	dashboard widgets cards empty-state
12	Object-shaped cardsWhere a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.	Layout	Updated	2026-08-11	cards css-only gradients variations
13	Adaptive tile mosaicA container with no artwork draws one from up to four member tiles, grid tracks following tile count.	Layout	—	2026-08-11	css-grid css-only no-assets cards
14	Ground-scrimmed artworkText printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.	Layout	Updated	2026-08-11	layout css-only gradients contrast
15	Hairline stat stripStat tiles joined by hairlines that are grid gap, not borders.	Layout	Updated	2026-08-21	stats css-grid css-only hairline
16	Annotated transcriptConversation bubbles with a speaker-colored spine and a fixed metadata gutter.	Layout	—	2026-08-21	conversation gutter status-roles contrast
17	Cork notice boardPinned paper notes on a cork board where every texture is layered CSS gradients.	Layout	—	2026-08-21	skeuomorphic gradients no-assets cards
18	Hotspot marker layerMarkers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.	Layout	Updated	2026-09-12	hotspots pointer-events aspect-ratio container-query
19	Line-art empty statesInline drawings for empty surfaces stroked in the inherited text colour.	Layout	—	2026-09-12	empty-state svg currentcolor illustration
20	Column-flow wallCards flowing down columns instead of across rows, with the reading-order cost stated plainly.	Layout	—	2026-09-12	masonry columns break-inside reading-order
21	Scroll edge shadowsAn inset shadow shown only on the edge that has more content behind it.	Interaction	—	2026-08-11	scrolling affordance lists overflow
22	Frozen-batch deckA one-card-at-a-time review queue whose batch is snapshotted at mount.	Interaction	—	2026-08-11	queue review-flow animation keyboard
23	Controls beside the anchorPer-card controls over a fully-linked card without nesting interactive elements in the anchor.	Interaction	Updated	2026-08-11	cards accessibility keyboard focus-within
24	Pluggable canvas visualizerOne canvas, a registry of draw modes, each mode owning its entire frame.	Interaction	Updated	2026-08-11	canvas visualization registry animation
25	Roving-grid boardA dense grid of state cells that is one tab stop with arrow-key navigation.	Interaction	Updated	2026-08-21	keyboard roving-tabindex accessibility states
26	Section railSticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.	Interaction	—	2026-08-21	navigation toc responsive aria-current
27	Ledge-press buttonsButtons on a solid ledge shadow that travel down onto it when pressed.	Interaction	—	2026-08-21	buttons skeuomorphic press tokens
28	Guarded controlA blocked control stays focusable, carries the reason as text, and refuses in its handler.	Interaction	Updated	2026-09-12	aria-disabled disabled preconditions keyboard
29	Polled job cardOne card for every state a background job passes through.	Interaction	Updated	2026-09-12	progress polling background-job indeterminate
30	Entry-transform motionFLIP-style motion between two rendered states when the old DOM is already gone.	Interaction	—	2026-09-12	animation transitions reflow reduced-motion
31	Slot-first pickerAssignment that starts at the destination slot, then narrows the catalogue.	Interaction	Updated	2026-09-12	assignment picker aria-pressed filtering
32	Undo toastA destructive action with no confirm dialog, held behind a toast and committed when it expires.	Forms	—	2026-08-28	undo toast destructive aria-live
33	Blast-radius confirmA confirm dialog that names everything a delete cascades and blocks dismissal while it runs.	Forms	New	2026-09-28	confirm-dialog destructive cascade dialog-element
34	Batch action barA bar that exists only while something is selected, states the count in words, caps at five actions.	Forms	Updated	2026-08-28	selection bulk-actions toolbar checkbox
35	Filtered to zeroThe three empty states a list actually has, written as three different screens.	Forms	—	2026-09-12	empty-state filter search zero-results
36	Parsed query chipsA search box that echoes back how it read the text as removable chips.	Forms	—	2026-09-12	search query-syntax chips facets
37	Compound-value pickerOne grouped select whose value carries both the kind and the id.	Forms	—	2026-09-12	select optgroup polymorphic forms
38	Ground-referenced colorColors solved against the page's own ground token so they invert correctly between themes.	Color	Updated	2026-08-11	color contrast color-mix accessibility
39	Single-property color variantsOne custom property carries the hue; border, fill, spine and dot derive from it.	Color	Updated	2026-08-21	color color-mix custom-properties theming
40	Controls on an unknown fillOpaque controls, a gradient-darkened fill, and a two-tone focus ring on a surface whose colour arrives from outside.	Color	Updated	2026-09-12	contrast brand-color focus-ring opacity
No patterns match that search. Try a shorter term, or clear the filters to see all 40.