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.

specimens, pressed flat

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 patterns

Sort by

Data displayAdded 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 dashboards · reports · admin tables

scheduletimelinegridflexbox

Data displayAdded Aug 11, 2026

Benchmark progress bar

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

Good for dashboards · reports · admin tables

progressbenchmarkscss-onlydata-viz

Data displayAdded 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 dashboards · reports · admin tables

tablematrixstickyaccessibility

Data displayAdded 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.

Good for dashboards · reports · admin tables

truncationpathstext-overflowbreadcrumbs

Updated

Data displayAdded Aug 21, 2026

Shape-mark sequence

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

Good for dashboards · reports · admin tables

steppersparklineseriestruncation

Data displayAdded 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.

Good for dashboards · reports · admin tables

timelinedrill-downcss-onlydata-viz

Data displayAdded 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 — all CSS, no images.

Good for dashboards · reports · admin tables

meterskeuomorphiccss-onlyreduced-motion

Data displayAdded Sep 12, 2026

Partitioned stage bar

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

Good for dashboards · reports · admin tables

progressstacked-barbatchlegend

Data displayAdded Sep 12, 2026

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 dashboards · reports · admin tables

explainabilitycalculatordisclosureformula

Updated

Data displayAdded Sep 12, 2026

Plan preview tree

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

Good for dashboards · reports · admin tables

dry-rundifftreepreview

Data displayAdded Sep 12, 2026

Uniform slot shell

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

Good for dashboards · reports · admin tables

dashboardwidgetscardsempty-state

Updated

LayoutAdded Aug 11, 2026

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 card grids · detail pages · landing sections

cardscss-onlygradientsvariations

LayoutAdded Aug 11, 2026

Adaptive tile mosaic

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

Good for card grids · detail pages · landing sections

css-gridcss-onlyno-assetscards

Updated

LayoutAdded Aug 11, 2026

Ground-scrimmed artwork

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

Good for card grids · detail pages · landing sections

layoutcss-onlygradientscontrast

Updated

LayoutAdded Aug 21, 2026

Hairline stat strip

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

Good for summary strip at the top of a detail page · dashboard KPI row · account usage overview

statscss-gridcss-onlyhairline

LayoutAdded Aug 21, 2026

Annotated transcript

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

Good for card grids · detail pages · landing sections

conversationgutterstatus-rolescontrast

LayoutAdded Aug 21, 2026

Cork notice board

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

Good for card grids · detail pages · landing sections

skeuomorphicgradientsno-assetscards

Updated

LayoutAdded Sep 12, 2026

Hotspot marker layer

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

Good for card grids · detail pages · landing sections

hotspotspointer-eventsaspect-ratiocontainer-query

LayoutAdded Sep 12, 2026

Line-art empty states

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

Good for card grids · detail pages · landing sections

empty-statesvgcurrentcolorillustration

LayoutAdded Sep 12, 2026

Column-flow wall

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

Good for card grids · detail pages · landing sections

masonrycolumnsbreak-insidereading-order

InteractionAdded Aug 11, 2026