https://github.com/robotpajamas/headlessui-svelte
An unofficial port of the HeadlessUI component library to Svelte 5.
https://github.com/robotpajamas/headlessui-svelte
a11y accessibility components headless headless-ui headlessui svelte svelte-components svelte5 sveltejs tailwindcss
Last synced: 5 months ago
JSON representation
An unofficial port of the HeadlessUI component library to Svelte 5.
- Host: GitHub
- URL: https://github.com/robotpajamas/headlessui-svelte
- Owner: RobotPajamas
- License: mit
- Created: 2024-12-04T03:59:42.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-19T21:18:02.000Z (6 months ago)
- Last Synced: 2025-02-01T05:41:23.531Z (5 months ago)
- Topics: a11y, accessibility, components, headless, headless-ui, headlessui, svelte, svelte-components, svelte5, sveltejs, tailwindcss
- Language: TypeScript
- Homepage: https://headlessui-svelte.com
- Size: 198 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# headlessui-svelte
This is an alpha port of [HeadlessUI](https://headlessui.com/) targeting Svelte 5 (or later).
A primary design goal is to stay as reasonably faithful to the HeadlessUI-React API as possible, in order to integrate better with [TailwindUI](https://tailwindui.com/). A secondary design goal is to align folder naming and tests, in order to reduce cognitive burden when porting and making updates.
This can manifest in strange, but intentional, ways:
- the existence of a `hooks` folder (not [SvelteKit hooks](https://svelte.dev/docs/kit/hooks))
- using test functions from the main headlessui repo, instead of the equivalent `testing-library` functionality
- the existence of a `Fragment` component
- ...
## Installation
```bash
npm install @robotpajamas/headlessui-svelte
```
## Documentation
Full documenation and examples will eventually live at [headlessui-svelte.com](https://headlessui-svelte.com)
## Progress
The target compatibility for the components below is based on [HeadlessUI React 2.2.0 (d71fb9c)](https://github.com/tailwindlabs/headlessui/tree/d71fb9cd2e12f5a48617b26e6bb3db90b3e07965). A component is considered completed when most of the mapped-over tests pass, and the component functions similarly to [headlessui.com](headlessui.com).
### Forms
- [ ] Button
- [ ] Checkbox
- [ ] Combobox
- [ ] Description
- [ ] Field
- [ ] Fieldset
- [ ] Input
- [ ] Label
- [ ] Listbox
- [ ] Radio Group
- [ ] Select
- [ ] Switch
- [ ] Textarea
### Components
- [ ] Dropdown Menu
- [ ] Disclosure
- [ ] Dialog
- [ ] Popover
- [ ] Portal
- [ ] Tabs
- [ ] Transition
## Community
Other Svelte-based HeadlessUI implementations:
- CaptainCodeman: https://github.com/CaptainCodeman/svelte-headlessui
- rgossiaux: https://github.com/rgossiaux/svelte-headlessui
## License
This library is licensed under the MIT license; see the LICENSE file for more.