Skip to content

A clean, accessible catalog

Every building block for your next website.

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

4

  • Open 404 Block

    404 Block

    Feedback

    Not-found state with home link.

A

  • Open Accordion

    Accordion

    Disclosure

    Vertically stacked, collapsible content panels.

  • Open Alert

    Alert

    Feedback

    Callout for highlighting important information.

  • Open Alert Dialog

    Alert Dialog

    Overlays

    Modal that interrupts the user to confirm an action.

  • Open Avatar

    Avatar

    Media

    User image with initials fallback.

B

  • Open Badge

    Badge

    Data Display

    Small status descriptor for UI elements.

  • Open Blog Card

    Blog Card

    Marketing

    Article preview with cover and meta.

  • Open Button

    Button

    Actions

    Triggers an action or event.

C

  • Open Calendar

    Calendar

    Inputs

    Date picker built on react-day-picker.

  • Open Card

    Card

    Layout

    Surface that groups related content and actions.

  • Open Carousel

    Carousel

    Media

    Sliding region of items with prev/next controls.

  • Open Cart Item

    Cart Item

    Commerce

    Single line in a shopping cart.

  • Open Checkbox

    Checkbox

    Inputs

    Binary input that can be checked, unchecked, or indeterminate.

  • Open Checkout Summary

    Checkout Summary

    Commerce

    Order totals before payment.

  • Open Collapsible

    Collapsible

    Disclosure

    Expand and collapse a section of content.

  • Open Command

    Command

    Navigation

    Fast, composable command menu / palette.

  • Open Cookie Banner

    Cookie Banner

    Feedback

    Consent notice anchored to the page.

  • Open CTA Banner

    CTA Banner

    Marketing

    Wide call-to-action band before the footer.

D

  • Open Data Table

    Data Table

    Data Display

    Sortable table with row actions.

  • Open Dialog

    Dialog

    Overlays

    Modal window overlaid on the page.

  • Open Discreet

    Discreet

    Data Display

    Masks sensitive values (e.g. amounts) with a CSS blur, with a toggle to reveal. Inspired by N26's discreet mode.

  • Open Drawer

    Drawer

    Overlays

    Edge-anchored panel for mobile-first flows.

E

  • Open Empty State

    Empty State

    Feedback

    Friendly placeholder when there is no data.

F

  • Open FAQ

    FAQ

    Marketing

    Question and answer accordion section.

  • Open Feature Grid

    Feature Grid

    Marketing

    Grid of product features with icons.

  • Open Footer

    Footer

    Marketing

    Site footer with link columns and copyright.

H

  • Open Hero Section

    Hero Section

    Marketing

    Above-the-fold marketing headline with CTA.

  • Open Hover Card

    Hover Card

    Overlays

    Preview content on hover or focus.

I

  • Open Input OTP

    Input OTP

    Inputs

    One-time-passcode input with per-digit slots.

L

  • Open Label

    Label

    Inputs

    Accessible label associated with a form control.

  • Open Login Form

    Login Form

    Auth

    Email + password sign-in form.

M

  • Open Menubar

    Menubar

    Navigation

    Persistent menu bar with multiple menus.

N

O

  • Open Order Confirmation

    Order Confirmation

    Commerce

    Success state after a completed purchase.

  • Open OTP Verification

    OTP Verification

    Auth

    Confirm a one-time code sent by email or SMS.

P

  • Open Password Reset

    Password Reset

    Auth

    Request a reset link by email.

  • Open Popover

    Popover

    Overlays

    Floating panel anchored to a trigger.

  • Open Pricing Table

    Pricing Table

    Commerce

    Tiered pricing plans with feature lists.

  • Open Product Card

    Product Card

    Commerce

    E-commerce listing card with price and CTA.

  • Open Progress

    Progress

    Feedback

    Indicator showing completion of a task.

R

S

  • Open Scroll Area

    Scroll Area

    Layout

    Styled, accessible scrollable region.

  • Open Select

    Select

    Inputs

    Dropdown to choose one value.

  • Open Sheet

    Sheet

    Overlays

    Side-anchored modal panel.

  • Open Signup Form

    Signup Form

    Auth

    Account creation with terms acceptance.

  • Open Skeleton

    Skeleton

    Feedback

    Placeholder shown while content loads.

  • Open Slider

    Slider

    Inputs

    Numeric range input controlled by a thumb.

  • Open Stat Card

    Stat Card

    Data Display

    KPI tile for dashboards.

  • Open Switch

    Switch

    Inputs

    Toggle a setting on or off.

T

  • Open Table

    Table

    Data Display

    Tabular data with header, body and rows.

  • Open Tabs

    Tabs

    Navigation

    Switch between related content panels.

  • Open Testimonial

    Testimonial

    Marketing

    Customer quote with name and avatar.

  • Open Toggle

    Toggle

    Inputs

    Two-state button (pressed / not pressed).

  • Open Toggle Group

    Toggle Group

    Inputs

    Group of toggle buttons (single or multi-select).

  • Open Tooltip

    Tooltip

    Overlays

    Brief label shown on hover or focus.