Pattern library
UI Patterns
A UI pattern library built for coding agents. 24 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
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.
24 patterns
Data display
Added Aug 11, 2026
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 room booking board, conference agenda, TV channel guide
- schedule
- timeline
- grid
- flexbox
- time
Data display
Added Aug 11, 2026
Benchmark progress bar
Places a raw figure on a scale of external benchmarks instead of printing it plain, so a number becomes "most of the way to the long estimate."
Good for course progress against module estimates, project spend against past projects, latency against published service tiers
- progress
- benchmarks
- css-only
- data-viz
- empty-state
Data display
Added Aug 11, 2026
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 type effectiveness chart, compatibility matrix, permissions grid
- table
- matrix
- sticky
- accessibility
- hover
Data display
Added Aug 11, 2026
Left-truncating paths
Shortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart — the opposite of what CSS ellipsis throws away.
Good for file browser breadcrumbs, import paths in a stack trace, nested category labels
- truncation
- paths
- text-overflow
- breadcrumbs
- file-systems
Data display
Updated Aug 28, 2026
Shape-mark sequence
A sequence compressed into a row of small marks whose shape carries the state, in two forms — gems on a thread for a bounded ordered track, flat marks with a “+N” tail for an open-ended exchange — with neither ever drawing furniture that asserts something untrue.
Good for multi-part series navigation, wizard and onboarding steps, course module sequences
- stepper
- sparkline
- series
- truncation
- css-only
- no-assets
Data display
Added Aug 21, 2026
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 — the bar shows the shape, the link does the work.
Good for archive pages grouped by month, activity history overviews, usage reports with drill-down
- timeline
- drill-down
- css-only
- data-viz
- no-assets
Data display
Added Aug 21, 2026
Glass vial meter
A vertical potion-vial meter whose liquid fills a wide bulb first and then rises into a narrow neck, with meniscus and sheen drawn as gradients and a pulsing low-state — all CSS, no images.
Good for remaining quota or budget displays, game health and resource meters, reading or scroll progress with personality
- meter
- skeuomorphic
- css-only
- reduced-motion
- no-assets
Layout
Updated Aug 28, 2026
Object-shaped cards
Where a record stands for a physical thing, the card is drawn as that thing. Eight variations — note, payment card, contact card, vinyl record, disc, instant print, folder, notebook — all in gradients, with no image assets.
Good for file browser, document library, wallet and billing screens
- cards
- css-only
- gradients
- variations
- no-assets
- skeuomorphic
Layout
Added Aug 11, 2026
Adaptive tile mosaic
A container with no artwork of its own draws one from up to four member tiles, with the grid tracks following the tile count so the frame is always full.
Good for playlist cover art, photo album thumbnails, folder covers in a file browser
- css-grid
- css-only
- no-assets
- cards
- layout
Layout
Updated Aug 28, 2026
Ground-scrimmed artwork
Text printed over artwork nobody has reviewed, scrimmed to an alpha that can be written down rather than guessed. Four geometries — a blurred header, a flat-held tile band, a pill the size of one label, and a directionless wash — chosen by whether the ink is a theme token or fixed.
Good for album or book detail header, movie and show detail pages, user-uploaded cover art
- layout
- css-only
- gradients
- contrast
- no-assets
- hero
- cards
Layout
Added Aug 21, 2026
Hairline stat strip
A row of stat tiles joined by hairlines that are grid gap, not borders — the container paints the border color and the tiles paint the surface, so separators never double up or break when the row wraps.
Good for summary strip at the top of a detail page, dashboard KPI row, account usage overview
- stats
- css-grid
- css-only
- hairline
- no-assets
Layout
Added Aug 21, 2026
Annotated transcript
Conversation bubbles where the fill is the speaker’s pale tint but body text stays at the page ink, the speaker’s strong color is a spine on the outer edge that flips sides for own messages, and per-message metadata lives in a fixed gutter beside the bubble.
Good for interview and Q&A articles, support ticket transcripts, annotated email or chat exchanges
- conversation
- gutter
- status-roles
- contrast
- css-only
Layout
Added Aug 21, 2026
Cork notice board
A grid of pinned paper notes on a cork board where every texture — cork speckle, timber frame, the 3D pushpin — is layered CSS gradients, with no image assets at all.
Good for community or team notice board, playful task and bounty lists, event and announcement walls
- skeuomorphic
- gradients
- no-assets
- cards
- css-only
Interaction
Added Aug 11, 2026
Scroll edge shadows
An inset shadow on a scroll container, shown only on the edge that actually has more content behind it, so the shadow reports state instead of decorating.
Good for sidebar navigation panels, dropdown menus, drawer and modal contents
- scrolling
- affordance
- lists
- overflow
- progressive-disclosure
Interaction
Added Aug 11, 2026
Frozen-batch deck
A one-card-at-a-time review queue whose batch is snapshotted at mount, because the list it was handed shrinks underneath it as each card is acted on.
Good for triage queues, approval workflows, content moderation
- queue
- review-flow
- animation
- keyboard
- reduced-motion
Interaction
Added Aug 11, 2026
Controls beside the anchor
Per-card controls that sit visually on top of a card whose whole surface is a link, without nesting an interactive element inside the anchor that invalid HTML forbids.
Good for pin or unpin on a card, favorite and star listings, archive from a grid
- cards
- accessibility
- keyboard
- focus-within
- grid
Interaction
Added Aug 11, 2026
Pluggable canvas visualizer
One canvas, a registry of draw modes, and the rule that each mode owns its entire frame — including the background — so a persistence mode can wash instead of clear.
Good for audio visualizer modes, metrics sparkline that switches to a heatmap, live signal displays
- canvas
- visualization
- registry
- animation
- reduced-motion
Interaction
Added Aug 21, 2026
Roving-grid board
A dense grid of state cells that is one tab stop with arrow-key navigation, where each state differs in fill, border weight, and border style at once — and clicking selects but never writes.
Good for episode or chapter trackers, habit and streak grids, seat or slot pickers
- keyboard
- roving-tabindex
- accessibility
- states
- dense-data
Interaction
Updated Aug 28, 2026
Section rail
Section navigation that is a sticky vertical rail on wide screens and a wrapping tab row on narrow ones from the same markup, with an optional observer layer that tracks reading position rather than last-heading-crossed.
Good for long-form article tables of contents, settings page section nav, detail page with many sections
- navigation
- toc
- responsive
- aria-current
- intersection-observer
- container-queries
- sticky
Interaction
Added Aug 21, 2026
Ledge-press buttons
Buttons that sit proud of the panel on a solid unblurred ledge shadow and travel down exactly onto it when pressed — with the ledge tint mixed toward ink so the mechanic flips correctly between themes on its own.
Good for primary calls to action in playful products, game and quiz interfaces, kiosk and touch-first screens
- buttons
- skeuomorphic
- press
- tokens
- css-only
Forms
Added Aug 28, 2026
Undo toast
A destructive action with no confirmation dialog: the row leaves the list on the press, the delete is held behind a toast, and it commits when the toast expires rather than when anything is clicked.
Good for removing tracks from a playlist, deleting photos from an album, archiving items from a list
- undo
- toast
- destructive
- aria-live
- reduced-motion
Forms
Added Aug 28, 2026
Batch action bar
A bar that exists only while something is selected: it states the count in words, caps at five actions, and switches off the per-row controls beneath it so there is one live scope at a time.
Good for selecting photos in a library, bulk tagging a media collection, file browser multi-select
- selection
- bulk-actions
- toolbar
- checkbox
- indeterminate
Color
Updated Aug 28, 2026
Ground-referenced color
Two jobs solved against the page’s own ground token rather than a synthetic white or black — walking an uncontrolled brand hex until it clears a 4.5:1 floor, and mixing an ordered intensity ramp — so both invert correctly between themes from one expression.
Good for user-picked tag colors, third-party brand colors, channel or label colors on a dashboard
- color
- contrast
- color-mix
- accessibility
- wcag
- theming
Color
Updated Aug 28, 2026
Single-property color variants
No component ever holds a hex: one custom property carries the hue, a base rule derives the border, fill, spine, and dot from it at fixed strengths, and each variant sets that one property — keyed by class for semantic tones or by data attribute for entity identity.
Good for category and status badges, label systems in issue trackers, callout and admonition variants
- color
- color-mix
- custom-properties
- theming
- data-attributes
- badges