human-kit UI

Headless and accessible UI components for Svelte 5. More than 40 components give you the behavior, and you give them the styles.

Features

• Headless. No component has a style. Each part accepts a class attribute and shows its state in data-* attributes, thus plain CSS, Tailwind, or a different tool can style it.
• Accessible. The components follow the patterns of the WAI-ARIA Authoring Practices. They set the roles and the aria-* attributes, and they control the keyboard, the focus, and the screen reader announcements.
• Ready for each input. The components work with a mouse, a touch screen, and a keyboard. The focus ring shows only when the focus comes from the keyboard. The tests run in a real browser.
• International. LocaleProvider gives a locale to the dates, the times, and the numbers. The built-in labels are in six languages, and the arrow keys obey a right-to-left layout.
• Made for Svelte 5. The components use runes, snippets, and bind:, and every prop has a type.
• Small. The package is native ESM with one subpath export for each component. The only dependency at run time is @floating-ui/dom.

Documentation

The documentation site has the quick start, a live demo of each component, the anatomy, and the full API reference.

Getting started

pnpm add @human-kit/ui

Each component is a namespace of parts. Import it from the root of the package, or from its subpath for the smallest bundle:

<script lang="ts">
	import { Switch } from '@human-kit/ui/switch';
</script>

<Switch.Root
	aria-label="Notifications"
	class="h-5 w-9 rounded-full bg-neutral-300 p-0.5 data-[checked=true]:bg-black"
>
	<Switch.Thumb class="block size-4 rounded-full bg-white data-[checked=true]:translate-x-4" />
</Switch.Root>

Contributing

Read the contributing guide. It tells you how to set up the repository, which commands to run, how to add a changeset, and how to write the documentation.

Releases

The releases page shows the changes in each version. The full history is in the changelog.

Community

• Code of conduct
• Security policy. Do not report a vulnerability in a public issue.
• Table performance benchmarks

License

MIT © Agustin Delgado