melt

Melt for Svelte 🧡: The best headless component library for Svelte. Now with Runes.

About

Melt UI is meant to be used as a base for your own styles and components. It offers:

• Uncoupled builders that can be attached to any element/component
• A clean API focused on simplicity and flexibility
• Typescript and SvelteKit support out-of-the-box
• Strict adherence to WAI-ARIA guidelines
• A high emphasis on accessibility, extensibility, quality and consistency

Basic Usage

npm i melt

Melt UI provides two ways to use components.

Using Builders

Builders can be called from a Svelte component, or svelte.js|ts files. Uses getters and setters for reactive properties.

<script lang="ts">
	import { Toggle } from "melt/builders";

	let value = $state(false)
	const toggle = new Toggle({
		value: () => value,
		onValueChange: (v) => (value = v),
	});
</script>

<button {...toggle.trigger}>
	{toggle.value ? "On" : "Off"}
</button>

Using Components

The component pattern provides a more traditional Svelte experience. It provides no elements or styling, and instead provides you with a instance from the builder. The difference lies in being able to use the bind: directive.

<script lang="ts">
	import { Toggle } from "melt/components";

	let value = $state(false)
</script>

<Toggle bind:value>
	{#snippet children(toggle)}
		<button {...toggle.trigger}>
			{toggle.value ? "On" : "Off"}
		</button>
	{/snippet}
</Toggle>

Discord

Got any questions? Want to talk to the maintainers?

Our Discord community is a great place to get in touch with us, and we'd love to have you there.