404 Block
FeedbackNot-found state with home link.
A clean, accessible catalog
Browse primitives and composed patterns — sorted alphabetically, by UI category, or by the workflow they support. Designed to meet WCAG 2.2 AA.
70 components
Not-found state with home link.
Vertically stacked, collapsible content panels.
Callout for highlighting important information.
Modal that interrupts the user to confirm an action.
Switch between light and dark mode.
Constrains content to a desired ratio.
User image with initials fallback.
Small status descriptor for UI elements.
Article preview with cover and meta.
Hierarchy of links for the current page.
Triggers an action or event.
Date picker built on react-day-picker.
Surface that groups related content and actions.
Sliding region of items with prev/next controls.
Single line in a shopping cart.
Binary input that can be checked, unchecked, or indeterminate.
Order totals before payment.
Expand and collapse a section of content.
Fast, composable command menu / palette.
Name, email and message fields.
Menu triggered by right-click.
Consent notice anchored to the page.
Wide call-to-action band before the footer.
Sortable table with row actions.
Modal window overlaid on the page.
Masks sensitive values (e.g. amounts) with a CSS blur, with a toggle to reveal. Inspired by N26's discreet mode.
Edge-anchored panel for mobile-first flows.
Menu of actions triggered by a button.
Friendly placeholder when there is no data.
Question and answer accordion section.
Grid of product features with icons.
Site footer with link columns and copyright.
Above-the-fold marketing headline with CTA.
Preview content on hover or focus.
Single-line text input.
One-time-passcode input with per-digit slots.
Accessible label associated with a form control.
Email + password sign-in form.
Persistent menu bar with multiple menus.
Progress through a multi-step form.
Top-level navigation with hover/focus disclosure.
Inline email subscribe input.
Success state after a completed purchase.
Confirm a one-time code sent by email or SMS.
Navigate between pages of content.
Request a reset link by email.
Floating panel anchored to a trigger.
Tiered pricing plans with feature lists.
E-commerce listing card with price and CTA.
Indicator showing completion of a task.
Group of mutually-exclusive options.
Resizable split panes.
Styled, accessible scrollable region.
Prominent search input with icon.
Dropdown to choose one value.
Visual or semantic divider.
Side-anchored modal panel.
Account creation with terms acceptance.
Placeholder shown while content loads.
Numeric range input controlled by a thumb.
KPI tile for dashboards.
Toggle a setting on or off.
Tabular data with header, body and rows.
Switch between related content panels.
Customer quote with name and avatar.
Multi-line text input.
Stacked, non-blocking notifications.
Two-state button (pressed / not pressed).
Group of toggle buttons (single or multi-select).
Brief label shown on hover or focus.