Preview
The pattern running live in an isolated frame, in whichever theme you are reading in.
Pattern Library40 patterns · 5 categories · 0 dependencies
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.
01.
Every pattern, three ways
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.
02.
Catalogue
40 patterns
01Data display
Added 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.
scheduletimelinegridflexbox
02Data display
Added 2026-08-11
Benchmark progress bar
Places a raw figure on a scale of external benchmarks instead of printing it plain.
progressbenchmarkscss-onlydata-viz
03Data display
Added 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.
tablematrixstickyaccessibility
04Data display
Added 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.
truncationpathstext-overflowbreadcrumbs
05Data display
Updated 2026-08-21Updated
Shape-mark sequence
A sequence compressed into a row of small marks whose shape carries the state.
steppersparklineseriestruncation
06Data display
Added 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.
timelinedrill-downcss-onlydata-viz
07Data display
Added 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.
meterskeuomorphiccss-onlyreduced-motion
08Data display
Added 2026-09-12
Partitioned stage bar
Progress for work with several possible endings, drawn as a census rather than a fraction.
progressstacked-barbatchlegend
09Data display
Added 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.
explainabilitycalculatordisclosureformula
10Data display
Updated 2026-09-12Updated
Plan preview tree
A dry run shown as a before-and-after tree with counts now, after, and the difference.
dry-rundifftreepreview
11Data display
Added 2026-09-12
Uniform slot shell
One card shell many independent sources render through, where the shell does the capping.
dashboardwidgetscardsempty-state
12Layout
Updated 2026-08-11Updated
Object-shaped cards
Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.
cardscss-onlygradientsvariations
13Layout
Added 2026-08-11
Adaptive tile mosaic
A container with no artwork draws one from up to four member tiles, grid tracks following tile count.
css-gridcss-onlyno-assetscards
14Layout
Updated 2026-08-11Updated
Ground-scrimmed artwork
Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.
layoutcss-onlygradientscontrast
15Layout
Updated 2026-08-21Updated
Hairline stat strip
Stat tiles joined by hairlines that are grid gap, not borders.
statscss-gridcss-onlyhairline
16Layout
Added 2026-08-21
Annotated transcript
Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.
conversationgutterstatus-rolescontrast
17Layout
Added 2026-08-21
Cork notice board
Pinned paper notes on a cork board where every texture is layered CSS gradients.
skeuomorphicgradientsno-assetscards
18Layout
Updated 2026-09-12Updated
Hotspot marker layer
Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.
hotspotspointer-eventsaspect-ratiocontainer-query
19Layout
Added 2026-09-12
Line-art empty states
Inline drawings for empty surfaces stroked in the inherited text colour.
empty-statesvgcurrentcolorillustration
20Layout
Added 2026-09-12
Column-flow wall
Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.
masonrycolumnsbreak-insidereading-order
21Interaction
Added 2026-08-11
Scroll edge shadows
An inset shadow shown only on the edge that has more content behind it.
scrollingaffordancelistsoverflow
22Interaction
Added 2026-08-11
Frozen-batch deck
A one-card-at-a-time review queue whose batch is snapshotted at mount.
queuereview-flowanimationkeyboard
23Interaction
Updated 2026-08-11Updated
Controls beside the anchor
Per-card controls over a fully-linked card without nesting interactive elements in the anchor.
cardsaccessibilitykeyboardfocus-within
24Interaction
Updated 2026-08-11Updated
Pluggable canvas visualizer
One canvas, a registry of draw modes, each mode owning its entire frame.
canvasvisualizationregistryanimation
25Interaction
Updated 2026-08-21Updated
Roving-grid board
A dense grid of state cells that is one tab stop with arrow-key navigation.
keyboardroving-tabindexaccessibilitystates
26Interaction
Added 2026-08-21
Section rail
Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.
navigationtocresponsivearia-current
27Interaction
Added 2026-08-21
Ledge-press buttons
Buttons on a solid ledge shadow that travel down onto it when pressed.
buttonsskeuomorphicpresstokens
28Interaction
Updated 2026-09-12Updated
Guarded control
A blocked control stays focusable, carries the reason as text, and refuses in its handler.
aria-disableddisabledpreconditionskeyboard
29Interaction
Updated 2026-09-12Updated
Polled job card
One card for every state a background job passes through.
progresspollingbackground-jobindeterminate
30Interaction
Added 2026-09-12
Entry-transform motion
FLIP-style motion between two rendered states when the old DOM is already gone.
animationtransitionsreflowreduced-motion
31Interaction
Updated 2026-09-12Updated
Slot-first picker
Assignment that starts at the destination slot, then narrows the catalogue.
assignmentpickeraria-pressedfiltering
32Forms
Added 2026-08-28
Undo toast
A destructive action with no confirm dialog, held behind a toast and committed when it expires.
undotoastdestructivearia-live
33Forms
Added 2026-09-28New
Blast-radius confirm
A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.
confirm-dialogdestructivecascadedialog-element
34Forms
Updated 2026-08-28Updated
Batch action bar
A bar that exists only while something is selected, states the count in words, caps at five actions.
selectionbulk-actionstoolbarcheckbox
35Forms
Added 2026-09-12
Filtered to zero
The three empty states a list actually has, written as three different screens.
empty-statefiltersearchzero-results
36Forms
Added 2026-09-12
Parsed query chips
A search box that echoes back how it read the text as removable chips.
searchquery-syntaxchipsfacets
37Forms
Added 2026-09-12
Compound-value picker
One grouped select whose value carries both the kind and the id.
selectoptgrouppolymorphicforms
38Color
Updated 2026-08-11Updated
Ground-referenced color
Colors solved against the page's own ground token so they invert correctly between themes.
colorcontrastcolor-mixaccessibility
39Color
Updated 2026-08-21Updated
Single-property color variants
One custom property carries the hue; border, fill, spine and dot derive from it.
colorcolor-mixcustom-propertiestheming
40Color
Updated 2026-09-12Updated
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.
contrastbrand-colorfocus-ringopacity
No patterns match that search.
Try a shorter term, or clear the filters to see all 40.