#01
Data display
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.
Added Aug 11, 2026
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.
How to read this book
Every pattern, three ways
Panel 1
Preview
The pattern running live in an isolated frame, in whichever theme you are reading in.
Panel 2
Source
Its markup, styles and behaviour, plus a single runnable file carrying its own palette.
Panel 3
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 editor notes:
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 collection
All 40 patterns
40 patterns
#02
Data display
Benchmark progress bar
Places a raw figure on a scale of external benchmarks instead of printing it plain.
Added Aug 11, 2026#03
Data display
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.
Added Aug 11, 2026#04
Data display
Left-truncating paths
Shortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.
Added Aug 11, 2026#05Updated!
Data display
Shape-mark sequence
A sequence compressed into a row of small marks whose shape carries the state.
Added Aug 21, 2026#06
Data display
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.
Added Aug 21, 2026#07
Data display
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.
Added Aug 21, 2026#08
Data display
Partitioned stage bar
Progress for work with several possible endings, drawn as a census rather than a fraction.
Added Sep 12, 2026#09
Data display
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.
Added Sep 12, 2026#10Updated!
Data display
Plan preview tree
A dry run shown as a before-and-after tree with counts now, after, and the difference.
Added Sep 12, 2026#11
Data display
Uniform slot shell
One card shell many independent sources render through, where the shell does the capping.
Added Sep 12, 2026#12Updated!
Layout
Object-shaped cards
Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.
Added Aug 11, 2026#13
Layout
Adaptive tile mosaic
A container with no artwork draws one from up to four member tiles, grid tracks following tile count.
Added Aug 11, 2026#14Updated!
Layout
Ground-scrimmed artwork
Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.
Added Aug 11, 2026#15Updated!
Layout
Hairline stat strip
Stat tiles joined by hairlines that are grid gap, not borders.
Updated Sep 28, 2026#16
Layout
Annotated transcript
Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.
Added Aug 21, 2026#17
Layout
Cork notice board
Pinned paper notes on a cork board where every texture is layered CSS gradients.
Added Aug 21, 2026#18Updated!
Layout
Hotspot marker layer
Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.
Added Sep 12, 2026#19
Layout
Line-art empty states
Inline drawings for empty surfaces stroked in the inherited text colour.
Added Sep 12, 2026#20
Layout
Column-flow wall
Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.
Added Sep 12, 2026#21
Interaction
Scroll edge shadows
An inset shadow shown only on the edge that has more content behind it.
Added Aug 11, 2026#22
Interaction
Frozen-batch deck
A one-card-at-a-time review queue whose batch is snapshotted at mount.
Added Aug 11, 2026#23Updated!
Interaction
Controls beside the anchor
Per-card controls over a fully-linked card without nesting interactive elements in the anchor.
Added Aug 11, 2026#24Updated!
Interaction
Pluggable canvas visualizer
One canvas, a registry of draw modes, each mode owning its entire frame.
Added Aug 11, 2026#25Updated!
Interaction
Roving-grid board
A dense grid of state cells that is one tab stop with arrow-key navigation.
Added Aug 21, 2026#26
Interaction
Section rail
Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.
Added Aug 21, 2026#27
Interaction
Ledge-press buttons
Buttons on a solid ledge shadow that travel down onto it when pressed.
Added Aug 21, 2026#28Updated!
Interaction
Guarded control
A blocked control stays focusable, carries the reason as text, and refuses in its handler.
Added Sep 12, 2026#29Updated!
Interaction
Polled job card
One card for every state a background job passes through.
Added Sep 12, 2026#30
Interaction
Entry-transform motion
FLIP-style motion between two rendered states when the old DOM is already gone.
Added Sep 12, 2026#31Updated!
Interaction
Slot-first picker
Assignment that starts at the destination slot, then narrows the catalogue.
Added Sep 12, 2026#32
Forms
Undo toast
A destructive action with no confirm dialog, held behind a toast and committed when it expires.
Added Aug 28, 2026#33New!
Forms
Blast-radius confirm
A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.
Added Sep 28, 2026#34Updated!
Forms
Batch action bar
A bar that exists only while something is selected, states the count in words, caps at five actions.
Added Aug 28, 2026#35
Forms
Filtered to zero
The three empty states a list actually has, written as three different screens.
Added Sep 12, 2026#36
Forms
Parsed query chips
A search box that echoes back how it read the text as removable chips.
Added Sep 12, 2026#37
Forms
Compound-value picker
One grouped select whose value carries both the kind and the id.
Added Sep 12, 2026#38Updated!
Color
Ground-referenced color
Colors solved against the page's own ground token so they invert correctly between themes.
Added Aug 11, 2026#39Updated!
Color
Single-property color variants
One custom property carries the hue; border, fill, spine and dot derive from it.
Added Aug 21, 2026#40Updated!
Color
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.
Added Sep 12, 2026No patterns match that search.
Try a shorter term, or clear the filters to see all 40.