Melt UI’s store/action builders attach accessible behavior to Svelte markup you own. This guide uses @melt-ui/svelte 0.86.6 to connect radio, slider and switch builders through their attributes, actions and writable stores; it is distinct from the newer runes API.
@melt-ui/svelte 0.86.6 builders with Svelte 5.57.1; explicit attributes and actions, no Melt preprocessor required. · Implementation reference
02
Melt UI Design System Design Reference
Verified @melt-ui/svelte 0.86.6 store/action builders running in Svelte 5.57.1. This is the documented builder API, not the separate next-generation runes API. Melt is headless; all --study-* visual values below are original application configuration supplied in full.
Melt UI Design System Melt Attaches Behavior to Markup You Own
Melt Attaches Behavior to Markup You Own
This example uses the store/action API from @melt-ui/svelte 0.86.6. createRadioGroup, createSlider and createSwitch return element builders and state stores. Ordinary buttons, spans and divs receive the attributes and actions that connect them to native control behavior.
The package does not supply the green paper, poster typography or panel geometry. Those choices are defined in the complete original stylesheet. The documentation also points to a separate newer runes API; this page deliberately identifies the verified builder version instead of mixing incompatible examples from both generations.
Melt UI Design System Spread Attributes and Install Actions Together
Spread Attributes and Install Actions Together
An element needs both its builder attributes and its action. The example uses forms such as {...$alignRoot} use:alignRoot and {...$alignItem(value)} use:alignItem. The attributes carry roles, state and positioning; the action installs the interactive behavior and cleanup.
The shorter use:melt syntax requires Melt’s optional preprocessor. Without it, the runtime throws a specific error rather than quietly attaching the builder. The repaired code uses explicit syntax throughout, so the Vite setup below does not omit a hidden preprocessing dependency. Each slider thumb likewise spreads its returned attributes and invokes thumb.action.
Melt UI Design System Define the Headless Visual System in Application CSS
Define the Headless Visual System in Application CSS
The --study-* roles distinguish the outer canvas, control surface, text, divider, action, focus, poster paper and decorative accent. The six named spacing values run from four to thirty-two pixels. They are original choices that make this particular composition reproducible, not a token catalog maintained by Melt.
Checked radio buttons and the switch use data-state=checked, while the slider’s returned inline positions determine where the thumb and selected range appear. The stylesheet adds only their geometry and colors. Replacing those native positions with hand-calculated percentages would duplicate logic and risk breaking orientation or direction support.
Melt UI Design System Keep One Alignment Selected with Native Group Navigation
Keep One Alignment Selected with Native Group Navigation
createRadioGroup starts at left, with horizontal orientation and looping enabled. Each radio item has a stable value: left, center or right. The poster’s text-align reads the selected value directly, so keyboard navigation and pointer selection affect the same visible composition.
The group receives an accessible Text alignment label. The three options are native builder-backed radio controls rather than ordinary buttons with manually toggled classes. Their checked state is reflected in both semantics and the data-state selector used for the filled visual treatment.
Choose Center and inspect the poster’s alignment.
Focus the Letter spacing slider and press End to reach 8px.
Turn the layout grid off and save the resulting local composition.
Melt UI Design System Treat the Value as an Array Even with One Thumb
Treat the Value as an Array Even with One Thumb
The slider starts with defaultValue:[2], not a scalar. The installed 0.86.6 builder exposes elements.thumbs, an array-producing store, and the template renders each returned thumb. The poster reads $tracking[0] and applies it as a pixel letter-spacing value.
The bounds are zero to eight with a step of one. Home and End reach the limits; arrow keys move by the defined step. Read $tracking[0] for this single-thumb composition, and retain the array model when adding another thumb rather than introducing a second unrelated scalar state.
Melt UI Design System Keep a Visual Guide Separate from the Design Values
Keep a Visual Guide Separate from the Design Values
createSwitch begins checked, and its state controls a guides class on the poster. That class draws two subtle repeating grid gradients at twenty-four-pixel intervals. Turning it off removes the gradients without changing alignment or letter spacing.
The visible Show layout grid label is associated with the switch’s stable ID. Its thumb movement is a CSS transition, with a reduced-motion override. The decorative orbit illustration is aria-hidden and has no interaction; it does not compete with the actual control semantics.
Melt UI Design System Coordinate Writable Stores Without Duplicating Control State
Coordinate Writable Stores Without Duplicating Control State
Alignment, tracking and grid visibility remain the builders’ writable stores. The rendered poster reads those stores directly: text-align uses alignment, letter-spacing uses the first slider value, and a CSS class uses the switch’s checked value. A separate application model for the same three settings would create unnecessary synchronization work.
The saved snapshot is derived from a signature of those values. Any change clears the confirmation, and reset writes left, [2] and true back to the stores. The one-element array matters: assigning the scalar 2 would not match the slider’s value contract even though only one thumb is visible.
Melt UI Design System Give Every Builder Its Attributes, Action and Name
Give Every Builder Its Attributes, Action and Name
The radio group receives a Text alignment label, the slider thumb refers to the visible Letter spacing text, and the switch is associated with its visible label. Those names belong on the actual builder-backed elements, not on surrounding decorative wrappers.
The explicit template syntax installs attributes and actions together. For slider thumbs the returned item includes its action, so the loop spreads the thumb attributes and invokes thumb.action. Preserve the builder’s positioning output when styling the track and range; it describes the actual numeric state and direction, while the stylesheet supplies color and geometry.
Check the real computed output, not only the numeric label.
Keep labels on the native builder elements.
Respect reduced motion for custom visual transitions.
Melt UI Design System Use the Verified Builder API in a Normal Svelte Project
Use the Verified Builder API in a Normal Svelte Project
The complete component uses Svelte store subscriptions with $alignment, $tracking and $grid. Svelte 5 can compile this established component syntax; the entry uses its current mount function. No custom icon library or stylesheet package is necessary because the whole visual layer is provided above.
The standard Vite Svelte setup below pins @melt-ui/svelte 0.86.6 and Svelte 5.57.1. It does not install the Melt preprocessor because the component already uses the explicit equivalent syntax. When migrating to the newer runes package, rewrite the API intentionally instead of changing only the dependency version.
createRadioGroup, createSlider and createSwitch attach native semantics and behavior to ordinary markup.
svelte
<script>
import {createRadioGroup,createSlider,createSwitch} from '@melt-ui/svelte';
const {elements:{root:alignRoot,item:alignItem},states:{value:alignment}}=createRadioGroup({defaultValue:'left',orientation:'horizontal',loop:true});
const {elements:{root:trackingRoot,range:trackingRange,thumbs},states:{value:tracking}}=createSlider({defaultValue:[2],min:0,max:8,step:1});
const {elements:{root:gridRoot},states:{checked:grid}}=createSwitch({defaultChecked:true});
let saved='';let previous='';
$: current=`${$alignment}|${$tracking[0]}|${$grid}`;
$: if(current!==previous){saved='';previous=current}
function save(){saved=`Saved locally: ${$alignment} aligned, ${$tracking[0]}px tracking, grid ${$grid?'on':'off'}.`}
function reset(){alignment.set('left');tracking.set([2]);grid.set(true);saved=''}
</script>
<main class="poster-shell"><header><p class="eyebrow">TYPE COMPOSITION · LIVE STUDY</p><h1>A small change. A different rhythm.</h1><p>Use native Melt UI builders to change the alignment, tracking and guide visibility of an original typographic poster.</p></header><div class="poster-layout"><section class="controls"><h2>Composition</h2><p class="control-label" id="alignment-label">Text alignment</p><div {...$alignRoot} use:alignRoot aria-labelledby="alignment-label" class="alignment">{#each ['left','center','right'] as value}<button {...$alignItem(value)} use:alignItem class="align-option">{value[0].toUpperCase()+value.slice(1)}</button>{/each}</div><div class="tracking-control"><p class="control-label" id="tracking-label">Letter spacing <strong>{$tracking[0]}px</strong></p><div {...$trackingRoot} use:trackingRoot class="slider"><div {...$trackingRange} use:trackingRange class="slider-range"></div>{#each $thumbs as thumb}<span {...thumb} use:thumb.action aria-labelledby="tracking-label" class="slider-thumb"></span>{/each}</div><div class="scale"><span>0px</span><span>8px</span></div></div><div class="grid-control"><label for="show-grid">Show layout grid</label><button id="show-grid" {...$gridRoot} use:gridRoot class="switch"><span></span></button></div><p class="hint">The grid is a visual aid. It does not change the poster’s text or spacing.</p><button class="primary" on:click={save} disabled={!!saved}>Save composition</button><button class="reset" on:click={reset}>Restore initial settings</button><p class="result" role="status">{saved||'This study changes only the local preview.'}</p></section><section class="poster" class:guides={$grid} style:text-align={$alignment} aria-label="Live typographic poster"><div class="poster-top"><span>TYPE / 2026</span><span>STUDY 04</span></div><div class="poster-orbit" aria-hidden="true"><i></i><b></b></div><div class="poster-title" style:letter-spacing={`${$tracking[0]}px`}><span>SPACE</span><span>TO</span><span>THINK.</span></div><div class="poster-bottom"><p>A pause between<br/>one idea and the next.</p><span>Original type study<br/>{$alignment} · {$tracking[0]}px</span></div></section></div></main>
All visual tokens are original, not official Melt defaults.
The slider thumb/range positions come from native builder attributes.
Decorative grid visibility is independent of spacing.
04
Melt UI Design System Agent Setup
Implementation Starting Point
Verified store/action API from @melt-ui/svelte 0.86.6 in Svelte 5.57.1. Explicit builder syntax avoids requiring the optional Melt preprocessor. This is not the separate next-generation runes API.
javascript
// npm create vite@latest melt-type-study -- --template svelte
// cd melt-type-study && npm install
// npm install [email protected] @melt-ui/[email protected]
// Save the complete examples as src/App.svelte and src/style.css.
// src/main.js:
import {mount} from 'svelte';
import App from './App.svelte';
import './style.css';
mount(App, {target:document.querySelector('#app')});
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
A Prompt for Your Project
Agent Prompt
Use @melt-ui/svelte 0.86.6 store/action builders with Svelte 5 for the typographic composition study. Attach both attributes and actions to createRadioGroup, createSlider and createSwitch elements; use the explicit syntax supplied rather than requiring an unstated preprocessor. Preserve the slider’s one-element array and elements.thumbs contract, alignment values and grid visibility. Bind the poster’s computed styles directly to these stores, invalidate saved feedback after changes, and reset to left, [2] and true. Do not mix in the newer runes API or an appointment model.
05
Melt UI Design System Sources and Scope
@melt-ui/svelte 0.86.6 store/action builders with Svelte 5.57.1. All visual tokens and poster content are original. Save records only local preview state and does not export or publish a design.
