Components

50+ accessible, token-driven UI primitives — copy the markup, ship the app.

Overview

Every component is built from the same semantic token system. Variants, tones, sizes, and states are part of the contract — not afterthoughts. Pick a category below and start composing.

50+

components

100%

token-driven

WCAG AA

contrast checked

framework lock-in

Typography

Heading

Six levels (h1 - h6) with token-driven sizes.

Text

Inline text utility for body, hint, and label sizes.

Paragraph

Block paragraph with measure and leading defaults.

Blockquote

Cited prose with a left rule and attribution.

Inline code

Monospaced inline snippets.

Caption

Smaller secondary text for figures.

List

Ordered and unordered lists.

Forms

Button

Primary action with variants, tones, sizes, and loading.

Input

Text input with prefix, suffix, and validation states.

Select

Native select styled to match other form fields.

Textarea

Multi-line input with auto-grow option.

Checkbox

Single + group with indeterminate state.

Radio

Radio group with arrow-key navigation.

Switch

Binary toggle with accessible labelling.

Range

Slider with tick marks and value display.

File upload

Drag-and-drop file zone with progress.

Search

Search input with clear button and shortcut hint.

Datepicker

Calendar popover with keyboard navigation.

Combobox

Searchable single-select with async loading.

Multi-select

Multi-value picker with chip removal.

Tags input

Free-text tags with paste support.

Feedback

Alert

Inline notice with icon and dismiss.

Badge

Compact status, count, and tag pills.

Toast

Transient overlay notification.

Progress

Determinate and indeterminate bars.

Spinner

Loading indicator with accessible label.

Skeleton

Placeholder shapes during load.

Empty state

Illustrated empty zone with CTA.

Overlays

Modal

Centred dialog with focus trap and overlay.

Dropdown

Menu of actions anchored to a trigger.

Tooltip

Small contextual hint on focus and hover.

Drawer

Off-canvas panel sliding from any edge.

Popover

Rich anchored panel for forms and content.

Navigation

Navbar

Top bar with brand, links, search, and actions.

Sidebar

Vertical nav with sections and active state.

Tabs

Tab list + panel pattern with arrow keys.

Breadcrumb

Ancestor trail for hierarchical pages.

Pagination

Page-number control with prev/next.

Stepper

Multi-step progress for wizards.

Data display

Card

Surface for grouped content with header and footer.

Table

Static table with striped, hover, and compact styles.

Accordion

Vertically stacked collapsible sections.

Avatar

Profile circle with image, initials, status dot.

List

Structured item rows with icons and meta.

Timeline

Chronological events with connectors.

Stat card

Single metric with delta and trend.

KPI widget

Multi-metric performance panel.

Auth

Sign in

Email + password sign-in form.

Sign up

New-account registration with confirm.

OTP

One-time passcode entry with auto-advance.

Forgot password

Send-reset-link form.

Reset password

New-password form with strength meter.

Unlock Premium Patterns

Get access to copy-paste ready Pro blocks, SaaS templates, and advanced component patterns.

Explore Pro Components