Components

The reference press control — loading, focus, and scale.

• ButtonPressable action control with variants, sizes, and loading state.

Tables, charts, and status chips that stay theme-aware.

• AreaChartFilled area chart for cumulative or volume trends.
• BadgeStatus pill and tag indicator with solid, soft, outline, glass, and live dot variants.
• BarChartCategorical bar chart with optional multi-series grouping.
• DataTableAdvanced table powered by TanStack Table on Hewn surfaces.
• DonutChartPart-to-whole radial chart with a required summary, focusable slices, and chart status frames.
• LineChartMulti-series line chart with optional tooltip.
• SparklineCompact inline trend line for dense data surfaces.
• TableAccessible data table foundation with sorting and empty states.

Calendar-backed fields with segmented editing.

• DatePickerAccessible date field with calendar popover.
• DateRangePickerAccessible start and end date fields with a range calendar popover and optional presets.

Progress, loading, and interruptible notifications.

• EmptyQuiet placeholder for lists and tables with no rows. Decorative geometry stays silent; this region announces.
• ProgressDeterminate and indeterminate progress feedback.
• SkeletonPlaceholder blocks for loading layouts.
• SpinnerIndeterminate loading indicator for inline and status feedback.
• ToastMotion-aware notification stack with global provider.

Fields that validate, announce, and match the active material.

• CheckboxBinary selection control with motion-aware check feedback.
• CheckboxGroupLabeled multi-select checkbox set with shared validation messaging.
• FileUploadDrag-and-drop file zone with browse trigger and removable file list.
• FormAccessible form container for native and custom field validation.
• InputGroupText field with prefix and suffix affixes inside shared input chrome.
• InputOTPSegmented one-time code entry with paste and keyboard navigation.
• NumberFieldLocalized number input with accessible increment and decrement steppers.
• PasswordFieldPassword input with an accessible show and hide toggle.
• RadioGroupMutually exclusive choice set with animated selection indicator.
• SearchFieldSearch input with clear control and Escape-to-clear behavior.
• SliderSingle-value range control with tabular output and accessible thumb.
• SwitchImmediate on/off control for preferences and modes.
• TextAreaMultiline labeled field with description and validation messaging.
• TextFieldLabeled text input with description and validation messaging.

Page structure and spacing primitives.

• CardElevated surface with optional header, body, and footer. Use when hierarchy needs a panel — not around every metric.

Wayfinding with shared indicator motion and clear trails.

• BreadcrumbsHierarchical trail linking ancestors to the current page.
• LinkAccessible navigation link with accent, muted, and underline variants.
• PaginationAccessible page navigation with previous/next, numbered pages, and optional link mode.
• StepperMulti-step progress indicator with horizontal and vertical orientations.
• TabsSectioned content with a shared motion indicator.

Modals, panels, and hints that respect focus and motion.

• CommandPaletteModal ⌘K command finder with grouped actions, shortcuts, and async loading.
• DialogModal surface for confirmations and focused tasks.
• DrawerSide panel overlay for filters and dense tools.
• MenuAction menu triggered from a button.
• PopoverAnchored content panel for short explanations without a modal layer.
• TooltipShort contextual hint anchored to a trigger on hover or focus.

Choose options without leaving the page context.

• ColorPickerComposable color picker with area, hue and alpha sliders, hex field, and swatch presets.
• ComboboxSearchable single-select built on React Aria ComboBox.
• SelectSingle-select control with popover listbox.
• TagFieldFilterable multi-select that shows selections as removable tags.