Components

Contextual feedback with info, success, warning, danger. Tint, filled, or outline; dismissible with an event.

Small status or count label. Six semantic colors, solid or outline.

Action trigger. Renders button or anchor; six variants, three sizes, honest disabled state.

Centered content column with a max width. The quiet layout primitive.

Hides content visually while keeping it in the accessibility tree.

Text input with a filtered suggestion listbox and full keyboard support.

Row of related buttons, spaced or segmented into one joined unit.

Multi-level picker: drill through nested options one column at a time.

Single boolean with label, hint, error, and indeterminate support.

Many booleans under one fieldset legend with shared validation.

Native swatch plus hex field with validation, plus optional presets.

Type-to-filter select with listbox semantics and clear button.

Floating action button pinned to a corner; round or extended with label.

Label, hint, and error wiring every input builds on. Use it for custom controls.

File input with dropzone mode, file list, and size/type hints.

Native form with validation orchestration: blocks bad submits, focuses first error.

Square button for icon-only actions with a required accessible label.

Joins addons and controls into one unit: prefixes, suffixes, attached buttons.

Checkbox dropdown with chip summary and select-all.

Numeric field with native spinners, decimal mobile keyboard, sm/md/lg sizes.

One-time-code boxes with auto-advance, backspace travel, and paste split.

Password field with a stateful show/hide toggle button.

One choice of many in a real fieldset with legend.

Star rating input with keyboard stepping and clear semantics.

Search box with a clear button that appears only when useful.

Exclusive option strip; radios under the hood, pill visuals on top.

Styled native select with optgroup support and size variants.

Single and range sliders with fill track and value readout.

On/off toggle with label and generous hit area.

Type, Enter, done: freeform tags with dedupe, max, and remove buttons.

The base text input: label, hint, error, sm/md/lg sizes.

Multi-line input with optional autosize growth.

Pressed-state button, standalone or in exclusive groups.

Move items between two columns with search and counters.

Hierarchical picker with expandable branches and breadcrumbs.

Month grid with single-date selection and keyboard travel.

Calendar popup anchored to a text field with formatted output.

Two-date selection with range highlight and presets.

Date plus time in one control with combined validation.

Hour/minute selection with native fallback and step control.

Scrollspy link that tracks the visible section and marks itself current.

Thumb-reach tab bar for small screens with active indicator.

Hierarchy trail with collapsed middle and aria-current on the page.

Keyboard-first palette: filter actions, run with Enter.

Right-click menu positioned by the Popper utility.

Side panel with focus trap, Escape close, and overlay.

Body link with consistent underline offset and visited tone.

Dropdown list with roving focus and submenu support.

Desktop-style menu bar with arrow-key travel across menus.

Top nav with hover panels for grouped destinations.

Site header with mobile toggle and sticky option.

Page controls with ellipsis logic and first/last shortcuts.

Bottom sheet that slides up on mobile, dialogs on desktop.

App rail with collapsible groups and current-page marking.

One button that blooms into related quick actions.

Numbered progress through a multi-step flow with states.

Underline, pill, or boxed tab lists with automatic activation.

Guided highlights that walk a newcomer through the interface.

Dim layer behind modals; click behavior is explicit per parent.

Full-width notice pinned to the top of a page or app.

Semantic side note with an accent edge; tint or filled.

Destructive-action guard with explicit confirm and cancel.

Clipboard copy with copied feedback and fallback text.

Modal with focus trap, Escape close, and labelled regions.

First-run screen with icon slot, cause, and the one action that fills it.

Rich preview on hover with pointer-safe delays.

Blocks a region while work runs, with spinner and message.

Anchored floating panel with click-away and Escape handling.

Determinate bar with tones and sizes, or indeterminate animation.

Circular progress for compact spaces and avatars.

Outcome screen: success, error, or info with next actions.

Keyboard shortcut past navigation straight to content.

Indeterminate ring for work with no finish line.

Transient notification with queue, timeout, and action slot.

Pins an element while the page scrolls past it.

Header, sidebar, and main landmarks wired as one layout.

Box that holds a ratio for media embeds.

Compact tag for filters and selections; removable with an event.

Horizontal or vertical rule with optional label.

Twelve-column responsive grid with gap control.

Keyboard shortcut glyph with correct semantics.

Title, description, and actions block for the top of a page.

Elevated surface with padding and elevation levels.

Bounded scroll region with styled bars.

Edge shadows that hint at more content offscreen.

Draggable divider between resizable panes.

Vertical or horizontal flow with spacing scale.

Filled series over time with accessible data table fallback.

Grouped bars with value labels and keyboard-readable data.

Single metric against a range with threshold zones.

Multi-series lines with points and legend.

Parts of a whole with segment labels and donut mode.

Multi-axis comparison on a spider grid.

Two-variable points with axis scales.

Word-sized trend line with no script.

Stacked collapsible sections, independent or exclusive.

Photo or initials in four sizes, sm through xl.

Overlapping member stack with overflow counter and sizes.

Quoted passage with citation support.

Content tile with media, header, body, actions; vertical or horizontal.

Slide region with arrows, dots, and autoplay that respects reduced motion.

Preformatted code with language label and copy support.

Sortable, filterable, selectable table with pagination.

Term-definition pairs for detail pages.

Marks search matches inside a passage.

Uniform image grid with captions and loading states.

Linked or text rows with selected and disabled states.

Loading placeholder in text, rect, or circular shape.

Hidden content revealed on explicit user action.

Labeled number with delta and trend direction.

Semantic table with sticky headers, stripes, and scroll wrapper.

Ordered events with real dates on a left rail.

Hover and focus hint anchored to any element.

Nested tree with full arrow-key travel and roving tabindex.

Scale, prose measure, and heading rhythm in one place.