Melt UI

Melt UI takes a distinctive approach to headless UI in Svelte. Instead of providing traditional components, it uses a builder pattern that returns Svelte actions and state stores — you apply these to your own markup for complete structural control.

The builder pattern works like this: you call a function like createAccordion() which returns action creators and reactive state. You then spread these onto your own HTML elements using Svelte’s use: directive. This means your markup structure is entirely up to you — there are no wrapper elements or forced DOM hierarchies.

This approach is both Melt UI’s greatest strength and its steepest learning curve. Developers familiar with Svelte actions will feel at home quickly, but those coming from React-style component libraries may need time to adjust. Once the pattern clicks, it unlocks a level of flexibility that traditional component libraries cannot match.

Accessibility is a core priority. Every builder implements the relevant WAI-ARIA authoring practices, handling keyboard navigation, focus management, screen reader announcements, and proper ARIA attributes automatically. The team has put serious effort into edge cases that many libraries overlook.

Melt UI supports both Svelte 4 and Svelte 5, making it a practical choice for teams that haven’t migrated yet. The library has a substantial community with over 3,000 GitHub stars, and the documentation includes interactive examples with code snippets for every builder.

One consideration: Bits UI was partly inspired by Melt UI but took a more traditional component-based approach. If you prefer standard Svelte component syntax, Bits UI may feel more natural. If you value the action-based pattern and want maximum markup control, Melt UI remains the stronger choice.

The project is actively maintained with regular releases, and the core team is responsive to community contributions and bug reports.