svelte-headlessui is an unofficial implementation of Tailwind HeadlessUI for Svelte. Just like the official implementation, they are:
- ✅ Completely unstyled
- ✅ Fully WAI-ARIA accessible UI components
- ✅ Fully typed with Typescript
- ✅ Designed to integrate beautifully with Tailwind CSS
- ✅ Designed to integrate beautifully with Svelte and SvelteKit
- ✅ Less than 14kB minified / 4kB minified gzipped
Install using your package manager of choice, e.g.
pnpm install svelte-headlessui
Import the appropriate
create... factory method in your component and use the custom store it returns to manage your component state and attach
use:action behaviors to your elements.
See the individual component pages for usage examples.
NOTE: Some of the examples use
svelte-transition to apply TailwindCSS animation classes. This is a separate package, not to be confused with the
svelte/transition module built into Svelte itself.
You may be interested in evaluating @rgossiaux/svelte-headlessui. This package aligns closer to the official components in it’s approach although I believe that approach (driven by React / Vue) contributes to the larger size of 173kB minified / 29kB minified + gzipped.
Special thanks to Shoob for the logo!