Antonin Januska

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

  • 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.

The library

40 patterns from shipped apps

40 patterns

No patterns match that search.

Try a shorter term, or clear the filters to see all 40.

  1. Data display · Added

    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.

    Tags schedule, timeline, grid, flexbox, time

  2. Data display · Added

    Benchmark progress bar

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

    Tags progress, benchmarks, css-only, data-viz, empty-state

  3. Data display · Added

    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.

    Tags table, matrix, sticky, accessibility, hover

  4. Data display · Added

    Left-truncating paths

    Shortens a long path by dropping whole segments from the left, because the tail is what tells two paths apart.

    Tags truncation, paths, text-overflow, breadcrumbs, file-systems

  5. Data display · Updated · Added

    Shape-mark sequence

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

    Tags stepper, sparkline, series, truncation, css-only, no-assets

  6. Data display · Added

    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.

    Tags timeline, drill-down, css-only, data-viz, no-assets

  7. Data display · Added

    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.

    Tags meter, skeuomorphic, css-only, reduced-motion, no-assets

  8. Data display · Added

    Partitioned stage bar

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

    Tags progress, stacked-bar, batch, legend, status, aria-label

  9. Data display · Added

    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.

    Tags explainability, calculator, disclosure, formula, tabular-nums, details

  10. Data display · Updated · Added

    Plan preview tree

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

    Tags dry-run, diff, tree, preview, bulk-operation, confirmation

  11. Data display · Added

    Uniform slot shell

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

    Tags dashboard, widgets, cards, empty-state, error-state, grid

  12. Layout · Updated · Added

    Object-shaped cards

    Where a record stands for a physical thing, the card is drawn as that thing — nine variations in pure gradients.

    Tags cards, css-only, gradients, variations, no-assets, skeuomorphic

  13. Layout · Added

    Adaptive tile mosaic

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

    Tags css-grid, css-only, no-assets, cards, layout

  14. Layout · Updated · Added

    Ground-scrimmed artwork

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

    Tags layout, css-only, gradients, contrast, no-assets, hero, cards

  15. Layout · Updated · Added

    Hairline stat strip

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

    Tags stats, css-grid, css-only, hairline, no-assets

  16. Layout · Added

    Annotated transcript

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

    Tags conversation, gutter, status-roles, contrast, css-only

  17. Layout · Added

    Cork notice board

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

    Tags skeuomorphic, gradients, no-assets, cards, css-only

  18. Layout · Updated · Added

    Hotspot marker layer

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

    Tags hotspots, pointer-events, aspect-ratio, container-query, overlay, responsive

  19. Layout · Added

    Line-art empty states

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

    Tags empty-state, svg, currentcolor, illustration, aria-hidden, no-assets

  20. Layout · Added

    Column-flow wall

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

    Tags masonry, columns, break-inside, reading-order, cards, responsive

  21. Interaction · Added

    Scroll edge shadows

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

    Tags scrolling, affordance, lists, overflow, progressive-disclosure

  22. Interaction · Added

    Frozen-batch deck

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

    Tags queue, review-flow, animation, keyboard, reduced-motion

  23. Interaction · Updated · Added

    Controls beside the anchor

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

    Tags cards, accessibility, keyboard, focus-within, grid

  24. Interaction · Updated · Added

    Pluggable canvas visualizer

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

    Tags canvas, visualization, registry, animation, reduced-motion

  25. Interaction · Updated · Added

    Roving-grid board

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

    Tags keyboard, roving-tabindex, accessibility, states, dense-data

  26. Interaction · Added

    Section rail

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

    Tags navigation, toc, responsive, aria-current, intersection-observer, container-queries, sticky

  27. Interaction · Added

    Ledge-press buttons

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

    Tags buttons, skeuomorphic, press, tokens, css-only

  28. Interaction · Updated · Added

    Guarded control

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

    Tags aria-disabled, disabled, preconditions, keyboard, aria-describedby, forms

  29. Interaction · Updated · Added

    Polled job card

    One card for every state a background job passes through.

    Tags progress, polling, background-job, indeterminate, aria-busy, reduced-motion

  30. Interaction · Added

    Entry-transform motion

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

    Tags animation, transitions, reflow, reduced-motion, navigation, layout-effect

  31. Interaction · Updated · Added

    Slot-first picker

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

    Tags assignment, picker, aria-pressed, filtering, forms, data-driven

  32. Forms · Added

    Undo toast

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

    Tags undo, toast, destructive, aria-live, reduced-motion

  33. Forms · New · Added

    Blast-radius confirm

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

    Tags confirm-dialog, destructive, cascade, dialog-element, forms

  34. Forms · Updated · Added

    Batch action bar

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

    Tags selection, bulk-actions, toolbar, checkbox, indeterminate, bulk-edit, mixed-values

  35. Forms · Added

    Filtered to zero

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

    Tags empty-state, filter, search, zero-results, aria-live, copywriting

  36. Forms · Added

    Parsed query chips

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

    Tags search, query-syntax, chips, facets, parsing, aria-live

  37. Forms · Added

    Compound-value picker

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

    Tags select, optgroup, polymorphic, forms, dependent-fields, keyboard

  38. Color · Updated · Added

    Ground-referenced color

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

    Tags color, contrast, color-mix, accessibility, wcag, theming, year-map

  39. Color · Updated · Added

    Single-property color variants

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

    Tags color, color-mix, custom-properties, theming, data-attributes, badges

  40. Color · Updated · Added

    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.

    Tags contrast, brand-color, focus-ring, opacity, wcag, theming