Components
All components
36 accessible components in three groups. Each page has live examples, a props reference and accessibility notes. Copy the file, then make it yours.
On this page
36 components in 3 groups
Inputs
12- ButtonActions in five variants and three sizes, with icons and loading state.
- InputSingle-line text field with prefix, suffix and validation states.
- TextareaMulti-line text with auto-grow and a character counter.
- SelectNative select styled to match, with groups and placeholder.
- CheckboxChecked, unchecked and indeterminate, with labels and descriptions.
- Radio groupOne choice from a list, as rows or as cards.
- SwitchOn/off toggle for settings that apply immediately.
- SliderPick a value or a range on a track.
- Segmented controlA compact set of mutually exclusive options.
- ComboboxNewSearchable select with keyboard navigation.
- Date pickerCalendar month view with single date and range selection.
- File uploadDrop zone with file list and upload progress.
Overlays & navigation
12- DialogModal dialog for focused tasks and confirmations.
- SheetPanel that slides in from an edge of the screen.
- PopoverFloating panel anchored to a trigger.
- TooltipShort label on hover and focus.
- Dropdown menuMenu of actions with icons, shortcuts and sections.
- CommandNew⌘K command palette with groups and search.
- ToastBrief notifications that stack in a corner.
- TabsSwitch between views, as underline or pill tabs.
- AccordionExpandable sections built on native details.
- BreadcrumbWhere a page sits in the hierarchy.
- PaginationMove between pages of results.
- StepperProgress through a multi-step flow.
Data display
12- AvatarInitials or image, with status and stacked groups.
- BadgeSmall status and category labels.
- CardContainer with header, body and footer.
- AlertInline messages for info, success, warning and errors.
- ProgressLinear and circular progress indicators.
- SkeletonPlaceholders while content loads.
- TableSimple, readable tables for structured data.
- Data tableNewSorting, filtering, selection and pagination.
- Empty stateWhat to show when there's nothing yet.
- KbdKeyboard keys and shortcuts.
- StatKey numbers with trend and sparkline.
- ChartLine, bar and donut charts with no dependency.