Svelte-Headless

Svelte-Headless is a personal component library based on Tailwind's Headless-UI. Built completely from scratch in Svelte and Typescript using actions and custom stores.

Overview

Custom Stores

All components have most of their logic contained in a single custom store that returns actions and uses specialized smaller custom stores. For example all the components that require keyboard navigation like Listbox, Menu, Radio Group and Tabs use the navigable custom store. This way logic should be easier to share and maintain. -At least I think so-

Since these stores are in TS files they do not use the Svelte compilation magic, this might reduce performance as some of them use the get store function which subscribes and unsubscribes. Further testing and refactor might be helpful in the future.

Actions

Since the components use actions, you can extract them as a prop and apply them on normal HTML Elements so that you can have more control on them. Perhaps you want to use a transition directive or other actions.

Most components are missing proper testing and aria support. Some of them do not support all the props of their official counterparts yet.

Svelte transitions were kept in mind when creating "toggleable" components like Dialog, Disclosure, Listbox and Menu; you can extract the action that controls them and use them on normal HTML elements, allowing you to use the Svelte transition API

Progress

Working on each component again refatoring, updating code and adding Aria support.

Components

• Dialog
• Disclosure
• Listbox
• Menu
• Popover
• Radio Group
• Switch
• Tabs

Additional Components

• Slider ?
• Tags Input ?

General

• Binding to the element itself (bind:this)
• Documentation
• Event forwarding and HTML attribute props
• Rendering different HTML elements (as prop)
• Storybook ?
• Typescript stuff ? (help)
• Using a testing library ?