Melt UI

Melt UI is a set of headless, accessible component builders for Svelte. Instead of shipping pre-styled components, it provides unstyled builder functions, such as createCollapsible, createDialog, and createSelect, that return elements, states, and helpers you attach to your own markup with the use:melt action, giving you complete control over styling while the library handles behavior and accessibility.

Built with strict adherence to the WAI-ARIA authoring guidelines, Melt UI manages keyboard navigation, focus management, and ARIA attributes so you don’t have to. It offers first-class TypeScript and SvelteKit support and serves as the accessibility foundation beneath higher-level Svelte design systems like Bits UI and shadcn-svelte.

What You Get

• Uncoupled builder functions (createDialog, createSelect, createCollapsible, and many more) you attach to any element
• The use:melt Svelte action that binds a builder’s element props to your markup
• Strict WAI-ARIA compliance with built-in keyboard navigation and focus management
• First-class TypeScript and SvelteKit support out of the box
• A CLI (npx @melt-ui/cli init) to scaffold usage in your project

Common Use Cases

• Building a fully custom-styled Svelte design system on an accessible foundation
• Adding complex interactive widgets (menus, dialogs, comboboxes) without writing ARIA logic
• Powering higher-level component kits like Bits UI or shadcn-svelte

Under The Hood

Architecture - The @melt-ui/svelte package is organized as a collection of builder modules under src/lib, one per component pattern. Each builder is a factory (e.g. createCollapsible) that constructs Svelte stores for state, derived stores of element attribute props, and event handlers, and returns them grouped as elements, states, options, and helpers. The use:melt action reads a builder’s element store and spreads its attributes and listeners onto the host node, keeping DOM ownership with the developer.

Tech Stack - Written in TypeScript for Svelte/SvelteKit, built with Vite, and documented via mdsvex. It uses Svelte’s store-based reactivity as its core primitive and relies on internal utilities for focus trapping, floating positioning, and keyboard interaction.

Code Quality - The repository shows strong engineering practice: Playwright e2e tests, a CI workflow, a large contributor base (125+), a maintained CHANGELOG and release notes, and a documented contribution process. The consistent builder pattern across dozens of components enforces uniformity.

API Design - The builder-plus-action model is distinctive: destructure the pieces you need from a create* function and attach them with use:melt. It requires learning the elements/states/options convention up front, but once internalized it is highly composable and gives total styling freedom, which is why it underpins several higher-level Svelte UI kits.