Component library

User profile picture with fallback to initials when no image is provided

Small status indicator or numeric count overlay attached to another element

Trigger for user actions; renders as <button> or <a> depending on context

Single boolean selection with an associated label; supports indeterminate state

Semantic heading element (H1–H5 visual sizes, any <h1>–<h6> tag) with a visual size decoupled from its document-outline level

Labelled single-line text entry with hint and error states

Standalone form label element — used when a label must be decoupled from its input

Single-selection control within a mutually exclusive group

Dropdown for choosing a single value from a list; supports grouped options

Placeholder loading state that mirrors the geometry of the content it replaces

Indeterminate loading indicator for in-progress operations

Binary toggle for on/off settings; renders as a styled checkbox under the hood

Inline label for categorising or annotating content — non-interactive

Multi-line text entry with label, hint, and error states — mirrors Input API

Contextual inline feedback message with semantic severity levels (info, success, warning, error)

Confirmation gate for an action the user must explicitly accept or decline — real alertdialog role, no outside-click/close-button dismiss, unlike Dialog

Compound container for grouped content — composed from named sub-components

Overlay for tasks or information requiring focused attention

Side-anchored slide-in panel for supplemental content or secondary navigation

Ephemeral notification pushed to a corner of the viewport; auto-dismisses after a timeout

Contextual label revealed on hover or focus — supplements an icon or truncated text

Collapsible content sections with animated expand/collapse; supports single or multi-open modes

Hierarchical page location trail; the last item is the current page (non-linked)

Sortable, filterable, paginated table for structured datasets

Placeholder for zero-content states — icon, heading, supporting text, and an optional action

Page-level section header with eyebrow, title, lead text, and an action slot

Page navigation controls for multi-page data sets; exposes current page and total page count

Static data table with semantic header, body, and row structure

Segmented view switcher with full keyboard navigation; built on Radix Tabs