Quick Start

@human-kit/ui is a set of headless, accessible UI primitives for Svelte 5. Components ship the behavior, semantics, and keyboard/focus handling — you bring the styles.

Installation

pnpm add @human-kit/ui

npm install @human-kit/ui

yarn add @human-kit/ui

bun add @human-kit/ui

Svelte 5 is a peer dependency, so make sure your project is on it:

pnpm add svelte@^5

npm install svelte@^5

yarn add svelte@^5

bun add svelte@^5

The package is published as native ESM with per-component subpath exports, so bundlers only include what you import.

Your first component

Every primitive is a set of composable parts under a namespace. Import from the barrel or a per-component subpath:

<script lang="ts">
	import { Button } from '@human-kit/ui';
	// or: import { Button } from '@human-kit/ui/button';

	let count = $state(0);
</script>

<Button.Root onclick={() => count++}>
	Clicked {count} times
</Button.Root>

That renders a real native <button> with correct semantics, focus behavior, and modality-aware focus data attributes — no styling assumptions baked in.

Styling

Components are headless: they expose state through data-* attributes and leave the visuals to you. Style them with plain CSS, Tailwind, or anything else:

<Button.Root class="rounded-md bg-black px-3 py-1.5 text-white data-[pressed]:opacity-80">
	Save
</Button.Root>

Common state hooks you can target: data-pressed, data-disabled, data-focus-visible, and data-pending. Each component's page lists its full data-attribute contract.

Next steps

Browse the components in the sidebar — each has a live demo, an anatomy breakdown, and a full API reference.
Read Accessibility to see the standards every component follows.
Follow the Releases timeline to track what's new.