/ Getting started — 01
Introduction
Kumiki — 組木 — is a deeply accessible UI primitive system for Svelte 5. It exists because the question “make this component a11y-correct, internationalisable, themeable, and lean” shouldn't be answered fifty times in fifty different repos.
Why Kumiki?
Most accessible component libraries pick one trade-off and stick with it. Some are headless and leave you to wire ARIA yourself. Some are styled and ship a full design system. Some lock you into a state machine library; some don't have one at all. Kumiki refuses the trade-off: five composable layers, each independently usable.
- Layer 0 — Types. A shared TypeScript surface every layer above speaks.
- Layer 1 — Primitives. Framework-agnostic helpers (focus trap, dismissable, ID, locale).
- Layer 2 — Machines. Pure-TS finite state machines. ~1 KB runtime, fully inspectable JSON.
- Layer 3 — Attachments.
{@attach}factories that drive ARIA anddata-stateon real DOM nodes. - Layer 4 — Components. Compound primitives like
<Combobox.Root>, ergonomic by default. - Layer 5 — Atelier. Opinionated, copy-pasteable styled variants. Ships at
0.x-preview.
Status
Kumiki is pre-alpha. The architecture is locked, the bundle budgets are enforced in CI, and the screen-reader nightlies are running — but no version has been published to npm yet. Expect the API to change. File issues at baseballyama/kumiki.
Up next
Next stop: installation or architecture. If you'd rather just look at things, browse the components.