Nº 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
- schedule
- timeline
- grid
- flexbox
Pattern Library · seed catalogue
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
PreviewThe pattern running live in an isolated frame, in whichever theme you are reading in.
SourceIts markup, styles and behaviour, plus a single runnable file carrying its own palette.
PromptA 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.
40 patterns
Nº 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
- progress
- benchmarks
- css-only
- data-viz
Nº 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
- table
- matrix
- sticky
- accessibility
Nº 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
- truncation
- paths
- text-overflow
- breadcrumbs
Nº 05
Data display Updated
Shape-mark sequence
A sequence compressed into a row of small marks whose shape carries the state.
Updated Aug 21, 2026
- stepper
- sparkline
- series
- truncation
Nº 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
- timeline
- drill-down
- css-only
- data-viz
Nº 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
- meter
- skeuomorphic
- css-only
- reduced-motion
Nº 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
- progress
- stacked-bar
- batch
- legend
Nº 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
- explainability
- calculator
- disclosure
- formula
Nº 10
Data display Updated
Plan preview tree
A dry run shown as a before-and-after tree with counts now, after, and the difference.
Updated Sep 12, 2026
- dry-run
- diff
- tree
- preview
Nº 11
Data display
Uniform slot shell
One card shell many independent sources render through, where the shell does the capping.
Added Sep 12, 2026
- dashboard
- widgets
- cards
- empty-state
Nº 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.
Updated Aug 11, 2026
- cards
- css-only
- gradients
- variations
Nº 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
- css-grid
- css-only
- no-assets
- cards
Nº 14
Layout Updated
Ground-scrimmed artwork
Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.
Updated Aug 11, 2026
- layout
- css-only
- gradients
- contrast
Nº 15
Layout Updated
Hairline stat strip
Stat tiles joined by hairlines that are grid gap, not borders.
Updated Aug 21, 2026
- stats
- css-grid
- css-only
- hairline
Nº 16
Layout
Annotated transcript
Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.
Added Aug 21, 2026
- conversation
- gutter
- status-roles
- contrast
Nº 17
Layout
Cork notice board
Pinned paper notes on a cork board where every texture is layered CSS gradients.
Added Aug 21, 2026
- skeuomorphic
- gradients
- no-assets
- cards
Nº 18
Layout Updated
Hotspot marker layer
Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.
Updated Sep 12, 2026
- hotspots
- pointer-events
- aspect-ratio
- container-query
Nº 19
Layout
Line-art empty states
Inline drawings for empty surfaces stroked in the inherited text colour.
Added Sep 12, 2026
- empty-state
- svg
- currentcolor
- illustration
Nº 20
Layout
Column-flow wall
Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.
Added Sep 12, 2026
- masonry
- columns
- break-inside
- reading-order
Nº 21
Interaction
Scroll edge shadows
An inset shadow shown only on the edge that has more content behind it.
Added Aug 11, 2026
- scrolling
- affordance
- lists
- overflow
Nº 22
Interaction
Frozen-batch deck
A one-card-at-a-time review queue whose batch is snapshotted at mount.
Added Aug 11, 2026
- queue
- review-flow
- animation
- keyboard
Nº 23
Interaction Updated
Controls beside the anchor
Per-card controls over a fully-linked card without nesting interactive elements in the anchor.
Updated Aug 11, 2026
- cards
- accessibility
- keyboard
- focus-within
Nº 24
Interaction Updated
Pluggable canvas visualizer
One canvas, a registry of draw modes, each mode owning its entire frame.
Updated Aug 11, 2026
- canvas
- visualization
- registry
- animation
Nº 25
Interaction Updated
Roving-grid board
A dense grid of state cells that is one tab stop with arrow-key navigation.
Updated Aug 21, 2026
- keyboard
- roving-tabindex
- accessibility
- states
Nº 26
Interaction
Section rail
Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.
Added Aug 21, 2026
- navigation
- toc
- responsive
- aria-current
Nº 27
Interaction
Ledge-press buttons
Buttons on a solid ledge shadow that travel down onto it when pressed.
Added Aug 21, 2026
- buttons
- skeuomorphic
- press
- tokens
Nº 28
Interaction Updated
Guarded control
A blocked control stays focusable, carries the reason as text, and refuses in its handler.
Updated Sep 12, 2026
- aria-disabled
- disabled
- preconditions
- keyboard
Nº 29
Interaction Updated
Polled job card
One card for every state a background job passes through.
Updated Sep 12, 2026
- progress
- polling
- background-job
- indeterminate
Nº 30
Interaction
Entry-transform motion
FLIP-style motion between two rendered states when the old DOM is already gone.
Added Sep 12, 2026
- animation
- transitions
- reflow
- reduced-motion
Nº 31
Interaction Updated
Slot-first picker
Assignment that starts at the destination slot, then narrows the catalogue.
Updated Sep 12, 2026
- assignment
- picker
- aria-pressed
- filtering
Nº 32
Forms
Undo toast
A destructive action with no confirm dialog, held behind a toast and committed when it expires.
Added Aug 28, 2026
- undo
- toast
- destructive
- aria-live
Nº 33
Forms New
Blast-radius confirm
A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.
Added Sep 28, 2026
- confirm-dialog
- destructive
- cascade
- dialog-element
Nº 34
Forms Updated
Batch action bar
A bar that exists only while something is selected, states the count in words, caps at five actions.
Updated Aug 28, 2026
- selection
- bulk-actions
- toolbar
- checkbox
Nº 35
Forms
Filtered to zero
The three empty states a list actually has, written as three different screens.
Added Sep 12, 2026
- empty-state
- filter
- search
- zero-results
Nº 36
Forms
Parsed query chips
A search box that echoes back how it read the text as removable chips.
Added Sep 12, 2026
- search
- query-syntax
- chips
- facets
Nº 37
Forms
Compound-value picker
One grouped select whose value carries both the kind and the id.
Added Sep 12, 2026
- select
- optgroup
- polymorphic
- forms
Nº 38
Color Updated
Ground-referenced color
Colors solved against the page's own ground token so they invert correctly between themes.
Updated Aug 11, 2026
- color
- contrast
- color-mix
- accessibility
Nº 39
Color Updated
Single-property color variants
One custom property carries the hue; border, fill, spine and dot derive from it.
Updated Aug 21, 2026
- color
- color-mix
- custom-properties
- theming
Nº 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.
Updated Sep 12, 2026
- contrast
- brand-color
- focus-ring
- opacity
No patterns match that search.
Try a shorter term, or clear the filters to see all 40.