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

patterns-hero-1.webp

every pattern, three ways

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.

01 · windowed-schedule-gridData displayAdded 2026-08-11
Windowed schedule grid
Rows of resources against a fixed time window, where each block is sized by its overlap with the window rather than by its own duration.
tags schedule, timeline, grid
02 · benchmark-progress-barData displayAdded 2026-08-11
Benchmark progress bar
Places a raw figure on a scale of external benchmarks instead of printing it plain.
tags progress, benchmarks, css-only
03 · cross-highlight-matrixData displayAdded 2026-08-11
Cross-highlight matrix
A 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.
tags table, matrix, sticky
04 · left-truncating-pathsData displayAdded 2026-08-11
Left-truncating paths
Shortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.
tags truncation, paths, text-overflow
05 · shape-mark-sequenceData displayUpdatedUpdated 2026-08-21
Shape-mark sequence
A sequence compressed into a row of small marks whose shape carries the state.
tags stepper, sparkline, series
06 · linked-month-barsData displayAdded 2026-08-21
Linked month bars
A month-by-month volume timeline built from plain divs where every aggregate row links to the filtered view that produced it.
tags timeline, drill-down, css-only
07 · glass-vial-meterData displayAdded 2026-08-21
Glass vial meter
A vertical potion-vial meter whose liquid fills a wide bulb first and then rises into a narrow neck — all CSS, no images.
tags meter, skeuomorphic, css-only
08 · partitioned-stage-barData displayAdded 2026-09-12
Partitioned stage bar
Progress for work with several possible endings, drawn as a census rather than a fraction.
tags progress, stacked-bar, batch
09 · term-by-term-derivationData displayAdded 2026-09-12
Term-by-term derivation
A computed figure shown with the audit trail behind it — the number is the product and the derivation is the receipt.
tags explainability, calculator, disclosure
10 · plan-preview-treeData displayUpdatedUpdated 2026-09-12
Plan preview tree
A dry run shown as a before-and-after tree with counts now, after, and the difference.
tags dry-run, diff, tree
11 · uniform-slot-shellData displayAdded 2026-09-12
Uniform slot shell
One card shell many independent sources render through, where the shell does the capping.
tags dashboard, widgets, cards
12 · object-shaped-cardsLayoutUpdatedUpdated 2026-08-11
Object-shaped cards
Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.
tags cards, css-only, gradients
13 · adaptive-tile-mosaicLayoutAdded 2026-08-11
Adaptive tile mosaic
A container with no artwork draws one from up to four member tiles, grid tracks following tile count.
tags css-grid, css-only, no-assets
14 · ground-scrimmed-artworkLayoutUpdatedUpdated 2026-08-11
Ground-scrimmed artwork
Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.
tags layout, css-only, gradients
15 · hairline-stat-stripLayoutUpdatedUpdated 2026-08-21
Hairline stat strip
Stat tiles joined by hairlines that are grid gap, not borders.
tags stats, css-grid, css-only
16 · annotated-transcriptLayoutAdded 2026-08-21
Annotated transcript
Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.
tags conversation, gutter, status-roles
17 · cork-notice-boardLayoutAdded 2026-08-21
Cork notice board
Pinned paper notes on a cork board where every texture is layered CSS gradients.
tags skeuomorphic, gradients, no-assets
18 · hotspot-marker-layerLayoutUpdatedUpdated 2026-09-12
Hotspot marker layer
Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.
tags hotspots, pointer-events, aspect-ratio
19 · line-art-empty-statesLayoutAdded 2026-09-12
Line-art empty states
Inline drawings for empty surfaces stroked in the inherited text colour.
tags empty-state, svg, currentcolor
20 · column-flow-wallLayoutAdded 2026-09-12
Column-flow wall
Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.
tags masonry, columns, break-inside
21 · scroll-edge-shadowsInteractionAdded 2026-08-11
Scroll edge shadows
An inset shadow shown only on the edge that has more content behind it.
tags scrolling, affordance, lists
22 · frozen-batch-deckInteractionAdded 2026-08-11
Frozen-batch deck
A one-card-at-a-time review queue whose batch is snapshotted at mount.
tags queue, review-flow, animation
23 · controls-beside-the-anchorInteractionUpdatedUpdated 2026-08-11
Controls beside the anchor
Per-card controls over a fully-linked card without nesting interactive elements in the anchor.
tags cards, accessibility, keyboard
24 · pluggable-canvas-visualizerInteractionUpdatedUpdated 2026-08-11
Pluggable canvas visualizer
One canvas, a registry of draw modes, each mode owning its entire frame.
tags canvas, visualization, registry
25 · roving-grid-boardInteractionUpdatedUpdated 2026-08-21
Roving-grid board
A dense grid of state cells that is one tab stop with arrow-key navigation.
tags keyboard, roving-tabindex, accessibility
26 · section-railInteractionAdded 2026-08-21
Section rail
Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.
tags navigation, toc, responsive
27 · ledge-press-buttonsInteractionAdded 2026-08-21
Ledge-press buttons
Buttons on a solid ledge shadow that travel down onto it when pressed.
tags buttons, skeuomorphic, press
28 · guarded-controlInteractionUpdatedUpdated 2026-09-12
Guarded control
A blocked control stays focusable, carries the reason as text, and refuses in its handler.
tags aria-disabled, disabled, preconditions
29 · polled-job-cardInteractionUpdatedUpdated 2026-09-12
Polled job card
One card for every state a background job passes through.
tags progress, polling, background-job
30 · entry-transform-motionInteractionAdded 2026-09-12
Entry-transform motion
FLIP-style motion between two rendered states when the old DOM is already gone.
tags animation, transitions, reflow
31 · slot-first-pickerInteractionUpdatedUpdated 2026-09-12
Slot-first picker
Assignment that starts at the destination slot, then narrows the catalogue.
tags assignment, picker, aria-pressed
32 · undo-toastFormsAdded 2026-08-28
Undo toast
A destructive action with no confirm dialog, held behind a toast and committed when it expires.
tags undo, toast, destructive
33 · blast-radius-confirmFormsNewAdded 2026-09-28
Blast-radius confirm
A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.
tags confirm-dialog, destructive, cascade
34 · batch-action-barFormsUpdatedUpdated 2026-08-28
Batch action bar
A bar that exists only while something is selected, states the count in words, caps at five actions.
tags selection, bulk-actions, toolbar
35 · filtered-to-zeroFormsAdded 2026-09-12
Filtered to zero
The three empty states a list actually has, written as three different screens.
tags empty-state, filter, search
36 · parsed-query-chipsFormsAdded 2026-09-12
Parsed query chips
A search box that echoes back how it read the text as removable chips.
tags search, query-syntax, chips
37 · compound-value-pickerFormsAdded 2026-09-12
Compound-value picker
One grouped select whose value carries both the kind and the id.
tags select, optgroup, polymorphic
38 · ground-referenced-colorColorUpdatedUpdated 2026-08-11
Ground-referenced color
Colors solved against the page's own ground token so they invert correctly between themes.
tags color, contrast, color-mix
39 · single-property-color-variantsColorUpdatedUpdated 2026-08-21
Single-property color variants
One custom property carries the hue; border, fill, spine and dot derive from it.
tags color, color-mix, custom-properties
40 · controls-on-an-unknown-fillColorUpdatedUpdated 2026-09-12
Controls on an unknown fill
Opaque controls, a gradient-darkened fill, and a two-tone focus ring on a surface whose colour arrives from outside.
tags contrast, brand-color, focus-ring

UI Patterns

Windowed schedule grid

Benchmark progress bar

Cross-highlight matrix

Left-truncating paths

Shape-mark sequence

Linked month bars

Glass vial meter

Partitioned stage bar

Term-by-term derivation

Plan preview tree

Uniform slot shell

Object-shaped cards

Adaptive tile mosaic

Ground-scrimmed artwork

Hairline stat strip

Annotated transcript

Cork notice board

Hotspot marker layer

Line-art empty states

Column-flow wall

Scroll edge shadows

Frozen-batch deck

Controls beside the anchor

Pluggable canvas visualizer

Roving-grid board

Section rail

Ledge-press buttons

Guarded control

Polled job card

Entry-transform motion

Slot-first picker

Undo toast

Blast-radius confirm

Batch action bar

Filtered to zero

Parsed query chips

Compound-value picker

Ground-referenced color

Single-property color variants

Controls on an unknown fill

No patterns match that search.