Website components
Form
- CheckboxstableA single independent on/off choice.
- ComboboxstableA type-to-search select for long option lists.
- Radio GroupstableChoosing exactly one option from a small visible set.
- Range SliderstablePicks a range between two handles.
- Segmented ControlstableTwo to five mutually exclusive choices side by side in one pill.
- SelectstableA dropdown for picking one option from a short fixed list.
- SliderstableA single number within a bounded range, as a large pill track.
- StepperstableA bounded number with minus and plus buttons.
- SwitchstableAn on/off toggle that applies immediately.
- Text InputstableA single-line text field with label, hint and error.
- TextareastableA multi-line text field for messages, descriptions or comments.
Actions
Navigation
- BreadcrumbsstableThe current page's place in a hierarchy.
- NavbarstablePrimary site navigation in a floating pill bar, with an optional mega menu.
- Page HeaderstableAn app screen's header: title on the left, actions on the right.
- PaginationstablePage navigation for a dataset split into pages.
- SidebarstableA vertical navigation panel for dashboards, grouped into sections.
- TabsstableSwitches between views that share one context, without navigating.
Overlay
Content
Feedback
- AlertstableAn inline banner with icon, title, description and an optional action.
- BadgestableA small tinted pill for a status, category or count.
- NudgestableOne short line that points to what needs attention now, with at most one action.
- Progress BarstableA horizontal bar of determinate progress.
- Save StatusstableA quiet Saving… / Saved indicator for an autosaving editor.
- ToaststableA transient notification raised from code (a save, an error).
- TooltipstableA short hint on hover or focus; InfoTooltip adds an info icon trigger.
Data Display
- AvatarstableA person's picture, or their initials when there is none.
- Empty StatestableA centered placeholder for when there is nothing to show yet.
- ImagestableAn image with a loading shimmer and a fallback when it fails.
- Star RatingstableA read-only star rating, or a five-star input.
- TablestableA searchable, sortable, paginated data table with optional row selection.
Layout
- Glow OrbstableThe soft corner glow accent used on dialogs, cards, heroes and footers.
- GridstableA responsive CSS grid; `cols` is the column count at the widest size.
- Scroll AreastableA scrollable box with a thin themed scrollbar.
- Scroll FadestableA sideways-scrolling row that fades on the side with more content.
- StackstableA flex container with spacing, alignment and direction as props.
Motion
- CursorstableReplaces the pointer with a spring-following dot inside a region.
- PreloaderstableA loading indicator for when there is no percentage to show.
- Scroll RevealstableFades content in, optionally sliding, as it scrolls into view.
- SkeletonstableA placeholder block; compose several for a loading state.
- Text RevealstableReveals copy one line at a time as it scrolls into view.