Installation

Requirements

• Node.js 22 or later.
• Svelte 5.29+ (for the {@attach} directive).
• An ESM-aware bundler — Vite 5+, Rollup 4+, esbuild 0.25+. CJS is not shipped.

Pick your layer

Most users want Layer 4 — compound components — and a locale bundle:

pnpm add @kumiki/components @kumiki/locale

Need full DOM control? Skip the components and consume Layer 3 attachments directly:

pnpm add @kumiki/headless

Building your own primitives? You can use any state machine standalone:

pnpm add @kumiki/machines

Provide a locale

Wrap your app in LocaleProvider once. Every Kumiki component below it picks up the messages and reading direction.

<script lang="ts">
  import { LocaleProvider } from '@kumiki/components';
  import { messages, direction } from '@kumiki/locale/ja';

  let { children } = $props();
</script>

<LocaleProvider.Root locale="ja" {messages} dir={direction}>
  {@render children()}
</LocaleProvider.Root>

The locale bundles are subpath imports — each weighs ≤ 1 KB brotli. Switch language at runtime by swapping the messages bundle; the components recompute their ARIA text automatically.

Verify the install

<script lang="ts">
  import { Toggle } from '@kumiki/components/toggle';
  let pressed = $state(false);
</script>

<Toggle.Root bind:pressed aria-label="Mute audio">
  {pressed ? 'Muted' : 'On'}
</Toggle.Root>

That's it. Go and check the component catalogue.