GitHub

/ Getting started — 03

Your first component

A guided five-minute tour. We'll wire a Toggle, observe its ARIA contract, and switch its display language without touching the component.

1. Drop it in

<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>

2. See it react

The toggle below is wired to your local state, not the demo registry — try it.

pressed = false

3. Inspect the contract

Open the inspector. The button has aria-pressed driven by state, plus a data-state="on" hook for CSS styling. No global CSS, no design opinions — style it any way you like.

<button aria-pressed="true" data-state="on" type="button">
  Muted
</button>

4. Localise it

Change the locale in the page header. The Toggle itself has no localised strings, but components like Combobox, Dialog, and FormField will switch instantly. Try the Combobox demo after switching to Japanese.

What now?