Components
37 accessible React primitives. Structure and ARIA, no visual opinions.
Layout
Flex
Single-axis flex layout. Column by default (mobile-first), with optional row direction at a breakpoint, wrap, alignment, and justification.
FlexItem
Child of Flex that controls grow and shrink behavior.
Grid
Responsive grid layout with fixed or auto-fit columns, gap control, and container queries.
GridItem
Child of Grid that can span multiple columns.
Page
Full-viewport wrapper with themed background and text colour. The outermost layout container for an application.
Section
Full-width page band with optional background, vertical padding, and gap. Compose with Wrapper for centered content.
Wrapper
Centered max-width container with horizontal padding. Controls content width and provides edge breathing room on small viewports.
Form Controls
Button
Triggers actions. Supports primary, secondary, ghost, and danger variants with three sizes.
Checkbox
Checkbox with label, description, error state, and indeterminate support.
Input
Text input with built-in label, description, error state, and ARIA wiring.
RadioGroup
Radio button group with managed selection, label, and keyboard navigation.
Select
Custom select dropdown with keyboard navigation, label, and error support.
Slider
Range slider with keyboard, pointer drag, and full ARIA support. Horizontal or vertical orientation.
Textarea
Multi-line text input with label, description, error state, and resize control.
Toggle
On/off switch with label, description, and two sizes.
Data Display
Avatar
User or entity avatar with image, initials fallback, and size variants.
Badge
Inline label for status, category, or count. Five variants, three sizes.
Box
Presentational container with elevation, radius, and padding. For backgrounds, borders, and visual grouping.
Heading
Heading levels 1–6 with optional display sizes for visual hierarchy.
Rating
Read-only star rating display. Renders filled, half-filled, and empty stars with token-driven colors and three sizes.
Separator
Horizontal or vertical line to divide content sections.
Table
Compound table component with caption, sortable headers, striped rows, and dense mode.
Text
Body text primitive. Renders paragraphs, spans, labels, and other inline text.
Feedback
Alert
Thin accessibility wrapper with role="alert", variant colours, and custom colour support. Layout is composed freely via children.
Progress
Determinate or indeterminate progress bar with label and three sizes.
Skeleton
Loading placeholder in text, heading, circular, or rectangular shapes.
Toast
Notification toast system with stacking, auto-dismiss, pause on hover, and variant-based roles.
Overlay
Dialog
Modal dialog with backdrop, focus trapping, and escape-to-close.
Drawer
Slide-out panel from any edge. Focus trap, scroll lock, and backdrop. Uses the dialog machine internally.
DropdownMenu
Action menu with items, labels, separators, and keyboard navigation. Compound component.
Popover
Floating content panel triggered by a button. Compound component with Trigger and Content.
Tooltip
Floating label that appears on hover or focus. Multiple anchor options.
Navigation
Accordion
Collapsible content sections. Single or multiple mode. Compound component with Item, Trigger, and Panel.
Breadcrumb
Navigation breadcrumb trail with customizable separator.
Link
Anchor element with inline and standalone variants, size options, and external link support.
Pagination
Page navigation with prev/next, page buttons, and ellipsis. Purely controlled.
Tabs
Tabbed interface with keyboard navigation. Compound component with TabList, Tab, and TabPanel.