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.

69 components

4

  • Open 404 Block

    404 Block

    Feedback

    Not-found 404 state with a clear message and a primary link back to the home page or main content.

A

  • Open Accordion

    Accordion

    Disclosure

    Vertically stacked, collapsible content panels for grouping disclosable sections of related information.

  • Open Alert

    Alert

    Feedback

    Callout box for highlighting important status, warnings, or contextual information inline with content.

  • Open Alert Dialog

    Alert Dialog

    Overlays

    Modal that interrupts the user to confirm an action.

  • Open Appearance Toggle

    Appearance Toggle

    Actions

    Theme toggle that switches between light and dark color modes while respecting system preferences.

  • Open Aspect Ratio

    Aspect Ratio

    Layout

    Constrains embedded media or content to a specific width-to-height aspect ratio across viewports.

  • Open Avatar

    Avatar

    Media

    Circular user avatar with image, initials fallback, and graceful loading when the image is unavailable.

B

  • Open Badge

    Badge

    Data Display

    Small status or category descriptor used to label, tag, or annotate UI elements at a glance.

  • Open Blog Card

    Blog Card

    Marketing

    Blog article preview card showing cover image, title, excerpt, author, and publication metadata.

  • Open Breadcrumb

    Breadcrumb

    Navigation

    Hierarchy of links showing the current page's location within the broader site navigation tree.

  • Open Button

    Button

    Actions

    Primary interactive control that triggers an action, submits a form, or navigates to another view.

C

  • Open Card

    Card

    Layout

    Surface that visually groups related content, metadata, and actions into a single contained block.

  • Open Cart Item

    Cart Item

    Commerce

    Single line item row in a shopping cart, showing thumbnail, title, quantity controls, and price.

  • Open Checkbox

    Checkbox

    Inputs

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

  • Open Checkout Summary

    Checkout Summary

    Commerce

    Order summary block displaying subtotal, taxes, discounts, and grand total before checkout payment.

  • Open Collapsible

    Collapsible

    Disclosure

    Expand and collapse a region of content to progressively disclose details without leaving the page.

  • Open Command

    Command

    Navigation

    Fast, composable command menu and palette for searching actions, navigation targets, or content quickly.

  • Open Contact Form

    Contact Form

    Marketing

    Contact form with name, email, and message fields for general inquiries and support requests.

  • Open Context Menu

    Context Menu

    Overlays

    Contextual menu triggered by a right-click or long-press, surfacing actions tied to the targeted element.

  • Open CTA Banner

    CTA Banner

    Marketing

    Wide call-to-action band placed before the footer to drive sign-ups, demos, or final conversions.

D

  • Open Data Table

    Data Table

    Data Display

    Sortable, filterable data table with row-level actions, suitable for admin and dashboard interfaces.

  • Open Dialog

    Dialog

    Overlays

    Modal dialog window overlaid on the page to focus attention on a single task or confirmation.

  • 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 sliding panel optimized for mobile-first flows like filters, settings, and quick actions.

  • Open Dropdown Menu

    Dropdown Menu

    Overlays

    Menu of contextual actions or links triggered by a button, with full keyboard and screen reader support.

E

  • Open Empty State

    Empty State

    Feedback

    Friendly empty-state placeholder shown when a list or view has no data, with guidance and an action.

F

  • Open FAQ

    FAQ

    Marketing

    Frequently asked questions accordion section that lets visitors expand answers one at a time.

  • Open Feature Grid

    Feature Grid

    Marketing

    Responsive grid of product features paired with icons and short descriptions to highlight benefits.

H

  • Open Hero Section

    Hero Section

    Marketing

    Above-the-fold marketing hero with a headline, supporting copy, and a primary call-to-action button.

  • Open Hover Card

    Hover Card

    Overlays

    Preview related content in a small floating card when the user hovers or focuses on a trigger.

I

  • Open Input

    Input

    Inputs

    Single-line text input field for collecting short responses such as names, emails, or search queries.

  • Open Input OTP

    Input OTP

    Inputs

    One-time-passcode input with per-digit slots, ideal for verification flows and two-factor authentication.

L

  • Open Label

    Label

    Inputs

    Accessible label associated with a form control to describe its purpose for sighted and screen reader users.

  • Open Login Form

    Login Form

    Auth

    Standard sign-in form collecting email and password with validation, error states, and recovery links.

M

  • Open Menubar

    Menubar

    Navigation

    Persistent menu bar that exposes multiple grouped menus, similar to desktop application menu bars.

  • Open Multi-Step Indicator

    Multi-Step Indicator

    Navigation

    Stepper indicating progress through a multi-step form or wizard, with completed and active states.

N

  • Open Navigation Menu

    Navigation Menu

    Navigation

    Top-level site navigation menu with hover and focus disclosure of nested links and feature panels.

  • Open Newsletter Signup

    Newsletter Signup

    Marketing

    Inline email subscribe input for newsletter signups, with a submit button and inline confirmation state.

O

  • Open Order Confirmation

    Order Confirmation

    Commerce

    Success confirmation state shown after a completed purchase, including next steps and order details.

  • Open OTP Verification

    OTP Verification

    Auth

    Confirm a one-time verification code sent by email or SMS as part of a secure two-factor flow.

P

  • Open Pagination

    Pagination

    Navigation

    Pagination control for navigating between pages of a long content list, table, or search result set.

  • Open Password Reset

    Password Reset

    Auth

    Password reset request form that asks for the account email and sends a secure recovery link.

  • Open Popover

    Popover

    Overlays

    Floating panel anchored to a trigger element, useful for showing extra controls or contextual content.

  • Open Pricing Table

    Pricing Table

    Commerce

    Tiered pricing plans displayed side by side with feature lists and a call-to-action for each plan.

  • Open Product Card

    Product Card

    Commerce

    E-commerce product listing card showing image, title, price, and a primary call-to-action button.

  • Open Progress

    Progress

    Feedback

    Visual indicator showing the completion progress of a task, upload, or multi-step background operation.

R

  • Open Radio Group

    Radio Group

    Inputs

    Group of mutually-exclusive radio options where only a single value can be selected at any time.

  • Open Resizable

    Resizable

    Layout

    Resizable split panes that let users drag a divider to balance space between adjacent regions.

S

  • Open Scroll Area

    Scroll Area

    Layout

    Styled, accessible scrollable region with custom scrollbars that work consistently across browsers.

  • Open Select

    Select

    Inputs

    Dropdown menu for choosing a single value from a list of predefined options, with keyboard support.

  • Open Separator

    Separator

    Layout

    Visual or semantic divider that separates content groups, often paired with section headings or lists.

  • Open Sheet

    Sheet

    Overlays

    Side-anchored modal panel that slides in from an edge for secondary content, navigation, or settings.

  • Open Signup Form

    Signup Form

    Auth

    Account creation form with email, password, and explicit terms acceptance for new user registration.

  • Open Skeleton

    Skeleton

    Feedback

    Animated placeholder shown while content loads, preserving layout and reducing perceived wait time.

  • Open Slider

    Slider

    Inputs

    Numeric range input controlled by a draggable thumb, ideal for adjusting volume, price, or filters.

  • Open Stat Card

    Stat Card

    Data Display

    KPI tile for dashboards displaying a single metric with label, value, and optional trend indicator.

  • Open Switch

    Switch

    Inputs

    On/off switch for binary settings such as enabling notifications, dark mode, or feature flags.

T

  • Open Table

    Table

    Data Display

    Tabular data layout with header, body, and rows for displaying structured records and data sets.

  • Open Tabs

    Tabs

    Navigation

    Tabbed interface for switching between related content panels in the same area without navigating away.

  • Open Testimonial

    Testimonial

    Marketing

    Customer testimonial quote paired with the author's name, role, and avatar for added social proof.

  • Open Textarea

    Textarea

    Inputs

    Multi-line text input area for longer responses such as comments, messages, or descriptive content.

  • Open Toast (Sonner)

    Toast (Sonner)

    Feedback

    Stacked, non-blocking toast notifications for surfacing transient feedback without interrupting the user.

  • Open Toggle

    Toggle

    Inputs

    Two-state button that visually reflects pressed and not-pressed states for binary, toolbar-style actions.

  • Open Toggle Group

    Toggle Group

    Inputs

    Group of toggle buttons supporting single or multi-select selection for filters and view options.

  • Open Tooltip

    Tooltip

    Overlays

    Brief contextual label shown on hover or focus to describe an icon button or compact control.