Preview
The pattern running live in an isolated frame, in whichever theme you are reading in.
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.
Every pattern, three ways
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.
40 patterns
No patterns match that search.
Try a shorter term, or clear the filters to see all 40.
Data display 11 patterns
Figures, timelines, and tables that say what the number means.
-
#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.
Good for resource schedules, booking views, on-call rotas
scheduletimelinegridflexbox -
#02
Data display
Benchmark progress bar
Places a raw figure on a scale of external benchmarks instead of printing it plain.
Good for goal tracking, score context, usage limits
progressbenchmarkscss-onlydata-viz -
#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.
Good for compatibility tables, pricing grids, lookup charts
tablematrixstickyaccessibility -
#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.
Good for file lists, breadcrumbs, repo paths
truncationpathstext-overflowbreadcrumbs -
#05
Data display Updated
Shape-mark sequence
A sequence compressed into a row of small marks whose shape carries the state.
Good for run history, streaks, step status
steppersparklineseriestruncation -
#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.
Good for archives by month, activity timelines, volume reports
timelinedrill-downcss-onlydata-viz -
#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.
Good for game-like meters, quotas, playful progress
meterskeuomorphiccss-onlyreduced-motion -
#08
Data display
Partitioned stage bar
Progress for work with several possible endings, drawn as a census rather than a fraction.
Good for batch jobs, import runs, pipeline status
progressstacked-barbatchlegend -
#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.
Good for price breakdowns, scores, estimates
explainabilitycalculatordisclosureformula -
#10
Data display Updated
Plan preview tree
A dry run shown as a before-and-after tree with counts now, after, and the difference.
Good for bulk moves, migrations, sync previews
dry-rundifftreepreview -
#11
Data display
Uniform slot shell
One card shell many independent sources render through, where the shell does the capping.
Good for dashboards, widget grids, status boards
dashboardwidgetscardsempty-state
Layout 9 patterns
Cards, strips, and walls: how surfaces sit together.
-
#12
Layout Updated
Object-shaped cards
Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.
Good for collections, catalogues, inventories
cardscss-onlygradientsvariations -
#13
Layout
Adaptive tile mosaic
A container with no artwork draws one from up to four member tiles, grid tracks following tile count.
Good for playlists, albums, folders
css-gridcss-onlyno-assetscards -
#14
Layout Updated
Ground-scrimmed artwork
Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.
Good for heroes, cover cards, user artwork
layoutcss-onlygradientscontrast -
#15
Layout Updated
Hairline stat strip
Stat tiles joined by hairlines that are grid gap, not borders.
Good for summary strips, KPI rows, usage overviews
statscss-gridcss-onlyhairline -
#16
Layout
Annotated transcript
Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.
Good for chat logs, agent transcripts, interviews
conversationgutterstatus-rolescontrast -
#17
Layout
Cork notice board
Pinned paper notes on a cork board where every texture is layered CSS gradients.
Good for notes, reminders, family boards
skeuomorphicgradientsno-assetscards -
#18
Layout Updated
Hotspot marker layer
Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.
Good for annotated images, floor plans, product tours
hotspotspointer-eventsaspect-ratiocontainer-query -
#19
Layout
Line-art empty states
Inline drawings for empty surfaces stroked in the inherited text colour.
Good for empty lists, first runs, zero results
empty-statesvgcurrentcolorillustration -
#20
Layout
Column-flow wall
Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.
Good for mood boards, galleries, notes walls
masonrycolumnsbreak-insidereading-order
Interaction 11 patterns
Controls, queues, and motion, with the keyboard path worked out.
-
#21
Interaction
Scroll edge shadows
An inset shadow shown only on the edge that has more content behind it.
Good for scrolling lists, wide tables, code blocks
scrollingaffordancelistsoverflow -
#22
Interaction
Frozen-batch deck
A one-card-at-a-time review queue whose batch is snapshotted at mount.
Good for review queues, flashcards, triage
queuereview-flowanimationkeyboard -
#23
Interaction Updated
Controls beside the anchor
Per-card controls over a fully-linked card without nesting interactive elements in the anchor.
Good for card grids, favourites, quick actions
cardsaccessibilitykeyboardfocus-within -
#24
Interaction Updated
Pluggable canvas visualizer
One canvas, a registry of draw modes, each mode owning its entire frame.
Good for audio visualizers, ambient displays, demos
canvasvisualizationregistryanimation -
#25
Interaction Updated
Roving-grid board
A dense grid of state cells that is one tab stop with arrow-key navigation.
Good for habit grids, seat maps, calendars
keyboardroving-tabindexaccessibilitystates -
#26
Interaction
Section rail
Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.
Good for long reports, docs pages, settings
navigationtocresponsivearia-current -
#27
Interaction
Ledge-press buttons
Buttons on a solid ledge shadow that travel down onto it when pressed.
Good for playful apps, games, kiosks
buttonsskeuomorphicpresstokens -
#28
Interaction Updated
Guarded control
A blocked control stays focusable, carries the reason as text, and refuses in its handler.
Good for permission-gated actions, incomplete forms, locked steps
aria-disableddisabledpreconditionskeyboard -
#29
Interaction Updated
Polled job card
One card for every state a background job passes through.
Good for exports, imports, renders
progresspollingbackground-jobindeterminate -
#30
Interaction
Entry-transform motion
FLIP-style motion between two rendered states when the old DOM is already gone.
Good for reordering, expanding cards, route changes
animationtransitionsreflowreduced-motion -
#31
Interaction Updated
Slot-first picker
Assignment that starts at the destination slot, then narrows the catalogue.
Good for loadouts, rosters, scheduling
assignmentpickeraria-pressedfiltering
Forms 6 patterns
Selection, search, and destructive actions done carefully.
-
#32
Forms
Undo toast
A destructive action with no confirm dialog, held behind a toast and committed when it expires.
Good for deletes, archives, dismissals
undotoastdestructivearia-live -
#33
Forms New
Blast-radius confirm
A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.
Good for cascading deletes, account removal, bulk purges
confirm-dialogdestructivecascadedialog-element -
#34
Forms Updated
Batch action bar
A bar that exists only while something is selected, states the count in words, caps at five actions.
Good for inbox triage, file managers, admin tables
selectionbulk-actionstoolbarcheckbox -
#35
Forms
Filtered to zero
The three empty states a list actually has, written as three different screens.
Good for search results, filtered lists, first runs
empty-statefiltersearchzero-results -
#36
Forms
Parsed query chips
A search box that echoes back how it read the text as removable chips.
Good for advanced search, log filters, issue trackers
searchquery-syntaxchipsfacets -
#37
Forms
Compound-value picker
One grouped select whose value carries both the kind and the id.
Good for assignee pickers, polymorphic links, targets
selectoptgrouppolymorphicforms
Color 3 patterns
Palettes solved against the ground they sit on.
-
#38
Color Updated
Ground-referenced color
Colors solved against the page's own ground token so they invert correctly between themes.
Good for heatmaps, year maps, theming
colorcontrastcolor-mixaccessibility -
#39
Color Updated
Single-property color variants
One custom property carries the hue; border, fill, spine and dot derive from it.
Good for badges, tags, status pills
colorcolor-mixcustom-propertiestheming -
#40
Color Updated
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.
Good for brand-colored headers, user themes, album art
contrastbrand-colorfocus-ringopacity