09·28last change
40 patterns

Pattern library · changelog stream

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

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.

40 patternsClearSorted by date added, newest first

1. Sep 2026

   16 patterns added

2. 09·282026 · Mon
   Pattern/Forms/New

   Blast-radius confirm

   A confirm dialog that names everything a delete cascades and blocks dismissal while it runs.

   #confirm-dialog#destructive#cascade#dialog-element#forms
3. 09·122026 · Sat
   Pattern/Data display

   Partitioned stage bar

   Progress for work with several possible endings, drawn as a census rather than a fraction.

   #progress#stacked-bar#batch#legend#status#aria-label
4. same day
   Pattern/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.

   #explainability#calculator#disclosure#formula#tabular-nums#details
5. same day
   Pattern/Data display/Updated

   Plan preview tree

   A dry run shown as a before-and-after tree with counts now, after, and the difference.

   #dry-run#diff#tree#preview#bulk-operation#confirmation
6. same day
   Pattern/Data display

   Uniform slot shell

   One card shell many independent sources render through, where the shell does the capping.

   #dashboard#widgets#cards#empty-state#error-state#grid
7. same day
   Pattern/Layout/Updated

   Hotspot marker layer

   Markers at percentage coordinates over a fixed-aspect picture, turning into a list when too narrow.

   #hotspots#pointer-events#aspect-ratio#container-query#overlay#responsive
8. same day
   Pattern/Layout

   Line-art empty states

   Inline drawings for empty surfaces stroked in the inherited text colour.

   #empty-state#svg#currentcolor#illustration#aria-hidden#no-assets
9. same day
   Pattern/Layout

   Column-flow wall

   Cards flowing down columns instead of across rows, with the reading-order cost stated plainly.

   #masonry#columns#break-inside#reading-order#cards#responsive
10. same day
    Pattern/Interaction/Updated

    Guarded control

    A blocked control stays focusable, carries the reason as text, and refuses in its handler.

    #aria-disabled#disabled#preconditions#keyboard#aria-describedby#forms
11. same day
    Pattern/Interaction/Updated

    Polled job card

    One card for every state a background job passes through.

    #progress#polling#background-job#indeterminate#aria-busy#reduced-motion
12. same day
    Pattern/Interaction

    Entry-transform motion

    FLIP-style motion between two rendered states when the old DOM is already gone.

    #animation#transitions#reflow#reduced-motion#navigation#layout-effect
13. same day
    Pattern/Interaction/Updated

    Slot-first picker

    Assignment that starts at the destination slot, then narrows the catalogue.

    #assignment#picker#aria-pressed#filtering#forms#data-driven
14. same day
    Pattern/Forms

    Filtered to zero

    The three empty states a list actually has, written as three different screens.

    #empty-state#filter#search#zero-results#aria-live#copywriting
15. same day
    Pattern/Forms

    Parsed query chips

    A search box that echoes back how it read the text as removable chips.

    #search#query-syntax#chips#facets#parsing#aria-live
16. same day
    Pattern/Forms

    Compound-value picker

    One grouped select whose value carries both the kind and the id.

    #select#optgroup#polymorphic#forms#dependent-fields#keyboard
17. same day
    Pattern/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.

    #contrast#brand-color#focus-ring#opacity#wcag#theming

18. Aug 2026

    24 patterns added

19. 08·282026 · Fri
    Pattern/Forms

    Undo toast

    A destructive action with no confirm dialog, held behind a toast and committed when it expires.

    #undo#toast#destructive#aria-live#reduced-motion
20. same day
    Pattern/Forms/Updated

    Batch action bar

    A bar that exists only while something is selected, states the count in words, caps at five actions.

    #selection#bulk-actions#toolbar#checkbox#indeterminate#bulk-edit#mixed-values
21. 08·212026 · Fri
    Pattern/Data display/Updated

    Shape-mark sequence

    A sequence compressed into a row of small marks whose shape carries the state.

    #stepper#sparkline#series#truncation#css-only#no-assets
22. same day
    Pattern/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.

    #timeline#drill-down#css-only#data-viz#no-assets
23. same day
    Pattern/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.

    #meter#skeuomorphic#css-only#reduced-motion#no-assets
24. same day
    Pattern/Layout/Updated

    Hairline stat strip

    Stat tiles joined by hairlines that are grid gap, not borders.

    #stats#css-grid#css-only#hairline#no-assets
25. same day
    Pattern/Layout

    Annotated transcript

    Conversation bubbles with a speaker-colored spine and a fixed metadata gutter.

    #conversation#gutter#status-roles#contrast#css-only
26. same day
    Pattern/Layout

    Cork notice board

    Pinned paper notes on a cork board where every texture is layered CSS gradients.

    #skeuomorphic#gradients#no-assets#cards#css-only
27. same day
    Pattern/Interaction/Updated

    Roving-grid board

    A dense grid of state cells that is one tab stop with arrow-key navigation.

    #keyboard#roving-tabindex#accessibility#states#dense-data
28. same day
    Pattern/Interaction

    Section rail

    Sticky vertical rail on wide screens, wrapping tab row on narrow ones, from the same markup.

    #navigation#toc#responsive#aria-current#intersection-observer#container-queries#sticky
29. same day
    Pattern/Interaction

    Ledge-press buttons

    Buttons on a solid ledge shadow that travel down onto it when pressed.

    #buttons#skeuomorphic#press#tokens#css-only
30. same day
    Pattern/Color/Updated

    Single-property color variants

    One custom property carries the hue; border, fill, spine and dot derive from it.

    #color#color-mix#custom-properties#theming#data-attributes#badges
31. 08·112026 · Tue
    Pattern/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.

    #schedule#timeline#grid#flexbox#time
32. same day
    Pattern/Data display

    Benchmark progress bar

    Places a raw figure on a scale of external benchmarks instead of printing it plain.

    #progress#benchmarks#css-only#data-viz#empty-state
33. same day
    Pattern/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.

    #table#matrix#sticky#accessibility#hover
34. same day
    Pattern/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.

    #truncation#paths#text-overflow#breadcrumbs#file-systems
35. same day
    Pattern/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.

    #cards#css-only#gradients#variations#no-assets#skeuomorphic
36. same day
    Pattern/Layout

    Adaptive tile mosaic

    A container with no artwork draws one from up to four member tiles, grid tracks following tile count.

    #css-grid#css-only#no-assets#cards#layout
37. same day
    Pattern/Layout/Updated

    Ground-scrimmed artwork

    Text printed over unreviewed artwork, scrimmed to an alpha that can be written down rather than guessed.

    #layout#css-only#gradients#contrast#no-assets#hero#cards
38. same day
    Pattern/Interaction

    Scroll edge shadows

    An inset shadow shown only on the edge that has more content behind it.

    #scrolling#affordance#lists#overflow#progressive-disclosure
39. same day
    Pattern/Interaction

    Frozen-batch deck

    A one-card-at-a-time review queue whose batch is snapshotted at mount.

    #queue#review-flow#animation#keyboard#reduced-motion
40. same day
    Pattern/Interaction/Updated

    Controls beside the anchor

    Per-card controls over a fully-linked card without nesting interactive elements in the anchor.

    #cards#accessibility#keyboard#focus-within#grid
41. same day
    Pattern/Interaction/Updated

    Pluggable canvas visualizer

    One canvas, a registry of draw modes, each mode owning its entire frame.

    #canvas#visualization#registry#animation#reduced-motion
42. same day
    Pattern/Color/Updated

    Ground-referenced color

    Colors solved against the page's own ground token so they invert correctly between themes.

    #color#contrast#color-mix#accessibility#wcag#theming#year-map