Components

Alpha

43 accessible React components with keyboard navigation, screen reader support, and ARIA attributes built in.

Form Controls

<Button />

An accessible button component with multiple variants, sizes, loading state, and proper ARIA attributes.

<Checkbox />

An accessible checkbox with support for indeterminate state, labels, and CSS variable customization.

<Combobox />

An accessible autocomplete/combobox with filtering, keyboard navigation, and compound component API.

<DatePicker />

An accessible date picker with calendar grid navigation, single and range selection modes, and keyboard-first design following the ARIA date picker pattern.

<FileUpload />

An accessible file upload with drag-and-drop, file validation, and screen reader announcements for file additions and errors.

A compound component that provides label, hint, error, and required indicator for any form control. Unlike Input, it is control-agnostic — wrap native inputs, selects, textareas, switches, or custom components.

<Input />

An accessible text input with built-in label, hint text, error handling, and aria attributes.

<Listbox />

A persistent listbox (always visible, not a dropdown) with single and multi-select modes, option groups, and full keyboard navigation.

<NumberField />

An accessible numeric input with increment/decrement buttons, min/max/step constraints, and precision control.

<RadioGroup />

An accessible radio group with roving tabindex, orientation support, and CSS customization.

<RichTextEditor />

An accessible WYSIWYG rich text editor with a toolbar, keyboard shortcuts for formatting, and an extensible adapter system for plugging in editor frameworks.

<SearchField />

An accessible search input with role='search', clear button, and search submission. Wraps input type='search' with proper ARIA.

<Select />

An accessible dropdown select with keyboard navigation, type-ahead, and compound component API.

<Slider />

An accessible range input with single and dual-thumb modes, step support, and ARIA value text.

<Switch />

An accessible toggle switch with label, checked state management, and CSS variable theming.

<Textarea />

An accessible multi-line text input with label, hint, error, and resize control.

<TimePicker />

An accessible time input with 12-hour and 24-hour format support, step intervals, and spinbutton keyboard pattern.

Overlays

<CommandPalette />

An accessible command palette (Cmd+K / Ctrl+K) for quick actions and search. Combines combobox and listbox patterns in a modal dialog.

<Dialog />

An accessible modal dialog with focus trapping, portal rendering, and compound component API.

<Drawer />

An accessible side panel overlay with focus trapping, slide animation, and compound component API. Semantically a modal dialog that slides in from a chosen edge.

<Menu />

An accessible dropdown menu (action menu) with keyboard navigation, sub-items, and separators.

<Popover />

A non-modal, anchored overlay for contextual information, actions, or forms. Semantically distinct from Dialog — no focus trap, no scroll lock.

<Toast />

An accessible notification system with automatic screen reader announcements and multiple variants.

<Tooltip />

A lightweight, accessible tooltip that appears on hover or focus. Uses role='tooltip' with proper aria-describedby wiring.

<Breadcrumbs />

Accessible breadcrumb navigation. Renders a <nav aria-label> landmark with an ordered list of links, marking the last item aria-current="page". Supports collapsible middle items via maxItems with a keyboard-accessible expand button.

<Pagination />

Accessible pagination control. Renders a <nav> landmark with a labelled list of page buttons, optional First/Last buttons, an optional rows-per-page selector, and an optional Go to page input. Works fully controlled, fully uncontrolled, or mixed.

<Stepper />

A multi-step progress indicator that shows the user's position in a sequential process. Supports horizontal and vertical orientations.

<Tabs />

An accessible tab interface with automatic keyboard navigation and compound component API.

Data Display

<Accordion />

Expand/collapse sections of content. Supports single or multiple open items, controlled and uncontrolled modes.

<Carousel />

An accessible content carousel with autoplay, looping, pagination, and full keyboard navigation following the ARIA carousel pattern.

<DataGrid />

An advanced, interactive data grid with cell-level keyboard navigation (ARIA grid pattern), sorting, inline editing, and toolbar support.

<Heading />

A semantic heading component that renders <h1>–<h6> elements with consistent typography and an optional visual size override.

<Table />

Accessible data table with automatic ARIA wiring for sorting and row selection. Renders native semantic HTML — no ARIA props required from consumers.

<Text />

A semantic text component that renders <p>, <span>, <div>, or <label> with consistent typography.

<TreeView />

An accessible hierarchical tree view with expand/collapse, single/multi-select, and full keyboard navigation following the ARIA treeview pattern.

Feedback

<Alert />

A static feedback element for communicating important messages. Uses role='alert' for errors/warnings and role='status' for info/success.

<EmptyState />

A semantic empty state component for when there is no content to display. Provides a heading, description, and optional action.

<ErrorSummary />

An accessible error summary that lists form validation errors with links to the corresponding fields. Implements the GOV.UK error summary pattern.

<ProgressBar />

An accessible progress indicator with role='progressbar', status variants, and animation support.

<Skeleton />

A loading placeholder with aria-busy and screen reader announcements. Replaces content with animated shapes while data loads.