Library
Components
A curated set of accessible, dependency-free React components. Each one is documented with live previews in all three appearance modes, a full API reference and keyboard behaviour.
116 components
Theming
Layout
- AspectRatioHolds images, video and embeds to a fixed width-to-height ratio so layouts never shift.
- BoxThe lowest-level layout primitive: padding, surface, border, radius and shadow from tokens.
- ContainerCentres page content with a maximum width and responsive gutters.
- DividerSeparates sections of content, optionally with a short label such as “or”.
- GridTwo-dimensional layout with fixed columns that collapse responsively, or fluid auto-fit tracks.
- InlineLays children out horizontally and wraps them, for tags, actions and metadata.
- SeparatorA thin rule between groups in menus, toolbars and lists.
- SpacerAdds a fixed gap from the scale, or flexes to push siblings apart.
- StackArranges children in a vertical or horizontal flow with consistent, token-based spacing.
Typography
- CaptionSmall supporting text for figures, timestamps and footnotes.
- CodeInline code for identifiers, values and file names in running text.
- HeadingSection headings with a semantic level and an independent visual size.
- KbdDisplays a keyboard key or shortcut with spoken labels for symbols.
- LinkNavigates to another page or resource, inline in text or on its own.
- RichTextTypographic rhythm for long-form content: legal pages, help articles, MDX.
- TextBody copy with size, weight and semantic tone from the type scale.
Actions
- ActionMenuA compact “more actions” menu built from an array, ideal for table rows and cards.
- ButtonTriggers an action, with six variants, four sizes and a loading state.
- ButtonGroupGroups related buttons, either joined into a segmented bar or evenly spaced.
- ChipA selectable toggle chip for quick filters and choices.
- CopyButtonCopies text to the clipboard and confirms it visually and to screen readers.
- FloatingActionButtonThe primary action of a screen, floating above content in a corner.
- IconButtonA compact button that shows only an icon and always carries an accessible label.
- SplitButtonA primary action joined to a menu of closely related alternatives.
- ToggleButtonA button that stays pressed, alone or in a group with single or multiple selection.
- ToolbarGroups related controls into one tab stop with arrow-key navigation.
Forms
- CalendarA keyboard-accessible month grid for choosing a date or a date range.
- CheckboxA native checkbox with label, description and an indeterminate state.
- CheckboxGroupA labelled set of checkboxes that share one array value.
- ComboboxAn editable input with a filtered list of suggestions, supporting async search and custom values.
- DatePickerA date field people can type into or fill from a calendar popover.
- DateRangePickerPicks a start and end date from a two-month calendar, with optional preset ranges.
- FileUploadChoose files by browsing or drag and drop, with type, size and count validation.
- FilterChipA filter control showing its name and current value, editable in a popover.
- FormFieldWires a label, help text and error message to any Stance form control.
- InlineEditText that can be edited in place: activate it to type, press Enter to save or Escape to cancel.
- InputA single-line text field with sizes, affixes and validation states.
- LabelA form label with required and optional indicators.
- MultiSelectChoose several values; selections appear as removable tags and the list stays open while you pick.
- NativeSelectA styled native <select> for simple choices and long lists.
- NumberInputNumeric entry with stepper buttons and full spinbutton keyboard support.
- PasswordInputPassword entry with a show/hide toggle and an optional strength meter.
- PinInputA one-time code or PIN field split into cells, with paste, SMS autofill and full keyboard support.
- RadioGroupA labelled set of mutually exclusive options, with list and card layouts.
- RangeSliderSelect a minimum and maximum with two thumbs that cannot cross.
- SearchInputA search field with a clear button, Escape to clear and an optional shortcut hint.
- SelectChoose one value from a list, with typeahead, groups, disabled options and form submission.
- SignaturePadCaptures a hand-drawn signature with pointer, touch or stylus, with undo, clear and form submission.
- SliderPick a single value from a range by dragging or with the keyboard.
- SwitchAn on/off toggle for settings that take effect immediately.
- TextareaMulti-line text entry with optional auto-resize and a character counter.
- TimePickerEnter a time of day with keyboard-friendly hour and minute segments.
Navigation
- BreadcrumbsShows where the current page sits in a hierarchy and links back up it.
- CommandMenuA searchable, keyboard-driven list of commands with groups, keywords and shortcuts.
- FileTreeA TreeView preset for folders and files, with open and closed folder icons.
- MenubarA persistent bar of menus for editor-style applications, as in File, Edit and View.
- NavigationMenuSite or product navigation with optional flyout panels of links, using the disclosure pattern.
- PaginationAccessible page navigation for long lists and tables, with previous, next and compact modes.
- SidebarComposable primitives for application sidebar navigation, with an icon-only collapsed mode.
- SkipLinkLets keyboard users jump past navigation to the main content.
- StepperShows progress through an ordered, multi-step task.
- TabBarA mobile navigation bar for three to five top-level destinations.
- TabsSwitches between related panels of content within the same page.
- TreeViewDisplays and navigates hierarchical data with expandable branches.
Data display
- AccordionStacked headings that each reveal a section, with single or multiple open items.
- AvatarA person or organisation shown as an image or initials, with optional presence.
- AvatarGroupA stack of overlapping avatars with a "+N" overflow, announced as a list.
- BadgeA short, non-interactive status or count label in six tones and three variants.
- CardA contained surface for related content, with header, media, content and footer parts.
- DescriptionListKey to value pairs such as account details or contract metadata, using native <dl>.
- ListA semantic list of related items with dividers, density and an optional bordered surface.
- ListItemA list row with leading media, title, description, metadata and actions.
- StatCardA single key metric with its change, period and an optional chart.
- TableSemantic table primitives with density, striping, sticky headers, sorting and accessible row links.
- TagA compact keyword label for categories and filters, with an optional accessible remove button.
- TimelineA chronological list of events, such as an audit trail or deployment history.
Feedback
- AlertAn inline message about the state of a page or section, in four tones.
- BannerA full-width, page-level announcement such as maintenance windows or plan limits.
- EmptyStateExplains why an area is empty and offers the next step.
- LoadingOverlayCovers a region or the whole screen with a spinner while work is in progress.
- NotificationNotification items and a ready-made notification center with unread state and mark-as-read.
- ProgressA linear progress bar for uploads, deployments and multi-step tasks.
- ProgressCircleA circular progress indicator, determinate or indeterminate.
- SkeletonPlaceholder shapes that hold the layout while content loads.
- SpinnerAn indeterminate loading indicator with an accessible status label.
- ToastBrief, non-blocking messages about the result of an action, with optional Undo.
Overlays
- AlertDialogAn interruptive dialog that asks the user to confirm or cancel an important action.
- ConfirmationDialogA ready-made confirm/cancel dialog with async loading and error handling, plus an imperative useConfirm() hook.
- ContextMenuA menu that opens at the pointer on right-click, long-press, Shift+F10 or the Menu key.
- DialogA modal window for focused tasks that must be finished or dismissed before returning to the page.
- DrawerA modal panel that slides in from a screen edge for details, filters and secondary tasks.
- DropdownMenuA menu of actions or options opened from a button, with groups, checkable items and submenus.
- HoverCardA rich preview that appears when hovering or focusing a link.
- PopoverNon-modal floating content anchored to a trigger, for small forms, filters and details.
- SheetA bottom sheet for mobile-first flows, with a drag handle to dismiss.
- TooltipA short text label that appears on hover and keyboard focus.
Media & code
- CodeBlockA multi-line code sample with title, line numbers, highlighting and copy.
- CopyableCodeOne line of code with a copy button, for commands, keys and IDs.
- IconOriginal Stance icons as inline SVG that inherit the current text colour.
- IconGalleryA searchable grid of every Stance icon; choose one to copy its name.
- ImageAn image with lazy loading, a reserved ratio and a graceful fallback.
Advanced
- ChartContainerAn accessible chart frame with title, legend, responsive sizing and a data-table alternative.
- CollapsibleA single disclosure: one trigger shows and hides one region.
- CommandPaletteA global ⌘K / Ctrl+K command menu in a dialog for fast navigation and actions.
- DataGridA spreadsheet-style grid with cell navigation, in-place editing, resizable columns and virtualised rows.
- DataTableA table for records with sorting, row selection, pagination, loading and empty states.
- ErrorBoundaryCatches rendering errors in part of the screen and shows a recoverable fallback.
- FilterBarA responsive row of search, filters, results count and "Clear all".
- ResizablePanelOne resizable region inside a SplitPanel, with size limits and optional collapse.
- ScrollAreaA native scroll container with thin themed scrollbars, edge fades and keyboard access.
- SearchableListA search field paired with a filtered list, with result counts announced as you type.
- SortableListA list people can reorder by dragging, with the keyboard, or with move buttons, announcing every change.
- SplitPanelA group of resizable panels separated by draggable, keyboard-accessible handles.
- VirtualizedListRenders very long lists efficiently by mounting only the visible window of items.