Headless, accessible UI components for Svelte 5
@human-kit/ui gives you the difficult parts:
the semantics, the keyboard operation, the focus control, and the position calculation. The components
have no styles. You write the design, and no component changes it.
pnpm add @human-kit/ui
npm install @human-kit/ui
yarn add @human-kit/ui
bun add @human-kit/ui
Why this library
- The components have no styles, and this is correct
- Each component controls its behavior and its semantics. Each component shows its state in data attributes: data-state, data-disabled, data-focus-visible. There is no theme to replace and no CSS to remove.
- Accessibility is the primary function
- The components keep the focus in the correct element, move the focus back by input modality, set the ARIA attributes, and do the typeahead and the roving tabindex. The tests compare this behavior to a written contract.
- The components use Svelte 5
- The components use runes. You can use bind: on each stateful prop. If you must hold the state in your own code, use the controlled props.
- One dependency at run time
- Only the components that float use Floating UI. The package is native ESM, and each component has a subpath export. Your bundler includes only the components that you import.
Documentation
Each page has the live demos, the props table, and the list of the data attributes.
Overview
- Quick Start Install @human-kit/ui and render your first accessible component in a couple of minutes.
- Accessibility How @human-kit/ui builds accessibility into every primitive — ARIA patterns, keyboard support, and focus management by default.
- Releases Every released version of the library, and the changes that shipped in it.
- About What @human-kit/ui is, the principles behind it, and how it's built.
Form
- Button A headless native button with pending semantics, pressed-state exposure, and modality-aware focus data attributes.
- Checkbox A composable tri-state checkbox with separate checked and indeterminate bindings, hidden input form support, and headless indicator rendering.
- CheckboxGroup A group of checkboxes with one array value, a shared name for the form, group-wide disabled and read-only state, and the counts for a parent select-all checkbox.
- Input A headless native text input with modality-aware focus state, native disabled and read-only booleans, and data attributes for validation styling.
- NumberField Composable numeric input with formatted text entry, spinbutton semantics, stepper buttons, optional wheel scrubbing, and pointer scrubbing.
- RadioGroup A group of radio buttons with one value, a shared name for the form, roving focus, and selection that follows the focus.
- Switch A composable boolean switch with controlled and uncontrolled state, hidden input form support, and a headless thumb part for custom styling.
- TextArea A headless native multiline text input with modality-aware focus state, disabled and read-only booleans, validation data attributes, and optional auto-resize.
- Toggle A headless two-state button with controlled and uncontrolled selected state, native button semantics, and modality-aware styling hooks.
- ToggleGroup Grouped toggle buttons with single or multiple selection, roving focus, disabled handling, and array-based controlled or uncontrolled value.
Pickers
- Autocomplete An always-visible, filterable list — a search input on top of a ListBox with virtual focus, no popover, and no open/closed state.
- ComboBox An accessible combination of text input, popover, and listbox with single and multiple selection, keyboard-first interaction, and async pending states.
- ListBox A headless selectable list primitive with keyboard navigation, single and multiple selection, and controlled or uncontrolled state.
- TransferList Two selectable lists with buttons that move items between them — one ordered value, keyboard and screen reader support included.
- Calendar A composable calendar with single-date and range selection, keyboard grid navigation, unavailable dates, and locale-aware rendering.
- Clock A standalone wheel-based time picker with spinbutton columns for hour, minute, second, and day-period selection.
- DatePicker A composable date picker pairing a segmented date input with a calendar popover, with locale-aware formatting and no-auto-correct validation.
- DateRangePicker A composable date range picker pairing two segmented date inputs with a range calendar popover.
- TimePicker A composable time picker pairing a segmented time input with a popover of wheel-based spinbutton columns.
Overlays
- Dialog An accessible modal dialog with trigger, portal, overlay, and content parts, plus nested dialog stacking.
- Drawer A panel anchored to an edge of the viewport, dismissed by swiping it away, with snap points, stacking and software-keyboard handling.
- Menu An accessible dropdown / action menu with arrow-key navigation, typeahead, groups, separators, submenus, and a context-menu trigger.
- Popover Floating content anchored to a trigger, with modal and non-modal interaction patterns and configurable positioning.
Structure
- Accordion A headless disclosure primitive with roving focus, single or multiple expansion, disabled items, and controlled or uncontrolled open state.
- Collapsible A headless single disclosure primitive with controlled or uncontrolled open state and a disabled state.
- Table A headless interactive table primitive with grid-style keyboard navigation, row selection, explicit sortable header triggers, and a composable part-based API.
- Tabs A headless tab primitive with roving focus, automatic or manual keyboard activation, disabled tabs, and panel composition.
- Tree A headless hierarchical collection primitive with keyboard navigation, expansion state, row selection, and section labels.