JSPM

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.