# Melt UI — Système de design

## Aperçu de l’interface du système de design Melt UI

Modifiez l’alignement, déplacez le curseur d’interlettrage et activez ou désactivez la grille ; l’affiche d’origine se met à jour à partir des stores du générateur.

## Référence de conception du système de design Melt UI

Générateurs de stores/actions @melt-ui/svelte 0.86.6 vérifiés et exécutés avec Svelte 5.57.1. Il s’agit du générateur API documenté, et non de l’API runes de nouvelle génération distincte API. Melt est sans interface ; toutes les valeurs visuelles --study-* ci-dessous sont une configuration d’application originale, fournie dans son intégralité.

### Configuration visuelle sémantique originale

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --study-canvas | #f3f0e9 | Page extérieure. |
| --study-surface | #fffdf8 | Panneau de contrôle. |
| --study-ink | #32352e | Texte principal. |
| --study-muted | #77796a | Texte d’accompagnement. |
| --study-line | #dbdece | Limites de la piste et du panneau. |
| --study-action | #486348 | Bouton radio sélectionné et plage active. |
| --study-on-action | #fff | Texte du bouton d’action. |
| --study-focus | #8aa77c | Indicateur de focus clavier. |
| --study-poster | #e0e8bb | Papier de l’affiche originale. |
| --study-accent | #d68f57 | Forme orbitale décorative. |
### Échelles originales d’espacement et de typographie

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| --study-space-1 | 4px | Espacements nommés de l’application ; ils ne sont pas définis par défaut dans Melt. |
| --study-space-2 | 8px | Espacements nommés de l’application ; ils ne sont pas définis par défaut dans Melt. |
| --study-space-3 | 12px | Espacements nommés de l’application ; ils ne sont pas définis par défaut dans Melt. |
| --study-space-4 | 16px | Espacements nommés de l’application ; ils ne sont pas définis par défaut dans Melt. |
| --study-space-6 | 24px | Espacements nommés de l’application ; ils ne sont pas définis par défaut dans Melt. |
| --study-space-8 | 32px | Espacements nommés de l’application ; ils ne sont pas définis par défaut dans Melt. |
| Text family | system-ui, sans-serif | Aucune dépendance à une police distante. |
| Page title | 34px / 1.15; 29px narrow | Hiérarchie originale des titres. |
| Poster title | clamp(28px,5.5vw,64px); 28px below 360px | Échelle d’affichage adaptative originale. |
| Poster tracking | 0–8px, step 1; default 2px | Interlettrage réellement réglé par le curseur. |
| Grid spacing | 24px × 24px | Repères décoratifs activés ou désactivés avec le commutateur natif. |
| Focus ring | 3px solid #8aa77c; 4px offset | Traitement explicite de l’état focus-visible. |
### Contrats natifs des générateurs

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| createRadioGroup.defaultValue | left | Un seul alignement sélectionné. |
| Radio orientation / loop | horizontal / true | La navigation par flèches suit un groupe horizontal et boucle d’une extrémité à l’autre. |
| createSlider.defaultValue | [2] | Le store contient un tableau, même avec une seule poignée. |
| Slider min / max / step | 0 / 8 / 1 | Suivi d’entiers dans une plage définie. |
| Slider elements.thumbs | Array-producing builder store | La version 0.86.6 renvoie des poignées, et non un élément de poignée unique. |
| createSwitch.defaultChecked | true | Les repères sont visibles au départ. |
| Builder attributes + action | {...$builder} use:builder | La syntaxe explicite fonctionne sans le préprocesseur Melt facultatif. |
| Thumb attributes + action | {...thumb} use:thumb.action | Chaque poignée générée possède ses propres attributs et sa propre action. |
## Guide complet du système de design Melt UI

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## Système de design Melt UI : Melt ajoute un comportement au balisage que vous gérez

### Melt ajoute un comportement au balisage que vous gérez

> Cet exemple utilise les générateurs de stores/actions API de @melt-ui/svelte 0.86.6. createRadioGroup, createSlider et createSwitch renvoient des générateurs d’éléments et des stores d’état. Les boutons, spans et divs ordinaires reçoivent les attributs et les actions qui les relient au comportement natif des contrôles.

Le package ne fournit ni le papier vert, ni la typographie de l’affiche, ni la géométrie du panneau. Ces choix sont définis dans la feuille de style originale complète. La documentation mentionne également une API runes plus récente distincte API ; cette page présente délibérément la version vérifiée du générateur au lieu de mélanger des exemples incompatibles des deux générations.

Consultez la spécification associée

## Système de design Melt UI : répartir les attributs et installer les actions ensemble

### Répartir les attributs et installer les actions ensemble

Un élément doit recevoir à la fois les attributs de son générateur et son action. L’exemple utilise des syntaxes telles que {...$alignRoot} use:alignRoot et {...$alignItem(value)} use:alignItem. Les attributs définissent les rôles, l’état et le positionnement ; l’action installe le comportement interactif et son nettoyage.

La syntaxe plus courte use:melt nécessite le préprocesseur facultatif de Melt. Sans lui, l’exécution renvoie une erreur précise au lieu d’ajouter silencieusement le générateur. Le code corrigé utilise partout la syntaxe explicite : la configuration Vite ci-dessous ne dépend donc d’aucun prétraitement implicite. Chaque poignée du curseur répartit également les attributs renvoyés et appelle thumb.action.

Consultez la spécification associée

## Système de design Melt UI : définir le système visuel sans interface dans l’application CSS

### Définir le système visuel sans interface dans l’application CSS

Les rôles --study-* distinguent le canevas extérieur, la surface de contrôle, le texte, le séparateur, l’action, le focus, le papier de l’affiche et l’accent décoratif. Les six espacements nommés vont de quatre à trente-deux pixels. Ce sont des choix originaux, pensés pour reproduire cette composition particulière, et non un catalogue de jetons géré par Melt.

Les boutons radio cochés et le commutateur utilisent data-state=checked, tandis que les positions intégrées renvoyées par le curseur déterminent l’emplacement de la poignée et de la plage sélectionnée. La feuille de style ne fait qu’ajouter leur géométrie et leurs couleurs. Remplacer ces positions natives par des pourcentages calculés manuellement reviendrait à dupliquer la logique et risquerait de compromettre la prise en charge de l’orientation ou du sens de lecture.

Consultez la spécification associée

## Système de design Melt UI : conserver une seule option d’alignement sélectionnée grâce à la navigation native du groupe

### Conserver une seule option d’alignement sélectionnée grâce à la navigation native du groupe

createRadioGroup commence par l’option left, avec une orientation horizontale et une navigation circulaire activées. Chaque option radio possède une valeur stable : left, center ou right. La propriété text-align de l’affiche lit directement la valeur sélectionnée ; la navigation au clavier et la sélection au pointeur modifient donc la même composition visible.

Le groupe reçoit le libellé accessible « Alignement du texte ». Les trois options sont des contrôles radio natifs gérés par le builder, et non de simples boutons dont les classes seraient modifiées manuellement. L’état sélectionné est reflété à la fois dans la sémantique et dans le sélecteur data-state utilisé pour le style de remplissage.

1. Choisissez « Centré » et observez l’alignement de l’affiche.

2. Placez le focus sur le slider « Espacement des lettres », puis appuyez sur End pour atteindre 8px.

3. Désactivez la grille de mise en page et enregistrez la composition locale obtenue.

Consultez la spécification associée

## Système de design Melt UI : traitez la valeur comme un tableau, même avec un seul curseur

### Traiter la valeur comme un tableau, même avec une seule poignée

Le slider commence par defaultValue:[2], et non par une valeur scalaire. La version 0.86.6 du builder installé expose elements.thumbs, un store qui produit un tableau, et le template affiche chaque curseur renvoyé. L’affiche lit $tracking[0] et l’applique comme valeur d’espacement des lettres en pixels.

Les limites vont de zéro à huit, par pas de un. Home et End permettent d’atteindre les limites ; les touches fléchées avancent selon le pas défini. Lisez $tracking[0] pour cette composition à un seul curseur et conservez le modèle de tableau lors de l’ajout d’un autre curseur, au lieu d’introduire un second état scalaire indépendant.

Consultez la spécification associée

## Système de design Melt UI : séparez le repère visuel des valeurs de conception

### Séparer le guide visuel des valeurs de conception

createSwitch est activé par défaut, et son état commande une classe guides sur l’affiche. Cette classe dessine deux dégradés répétitifs subtils qui forment une grille à intervalles de vingt-quatre pixels. La désactivation du switch supprime les dégradés sans modifier l’alignement ni l’espacement des lettres.

Le libellé visible « Afficher la grille de mise en page » est associé à l’identifiant stable du switch. Le déplacement de son curseur est animé par une transition CSS, avec une règle de remplacement pour la réduction des animations. L’illustration décorative en orbite est masquée aux technologies d’assistance avec aria-hidden et n’est pas interactive ; elle ne concurrence pas la sémantique des véritables contrôles.

Consultez la spécification associée

## Système de design Melt UI : coordonnez les stores modifiables sans dupliquer l’état des contrôles

### Coordonner les stores modifiables sans dupliquer l’état des contrôles

L’alignement, l’espacement des lettres et la visibilité de la grille restent gérés par les stores modifiables des builders. L’affiche affichée lit directement ces stores : text-align utilise alignment, letter-spacing utilise la première valeur du slider, et une classe CSS utilise la valeur d’activation du switch. Un modèle d’application distinct pour ces trois mêmes paramètres entraînerait un travail de synchronisation inutile.

L’instantané enregistré est dérivé d’une signature de ces valeurs. Toute modification efface la confirmation, et la réinitialisation rétablit left, [2] et true dans les stores. Le tableau à un élément est important : affecter la valeur scalaire 2 ne respecterait pas le contrat de valeur du slider, même si un seul curseur est visible.

Consultez la spécification associée

## Système de design Melt UI : attribuez à chaque builder ses attributs, son action et son nom

### Attribuez à chaque builder ses attributs, son action et son nom

Le groupe radio reçoit le libellé « Alignement du texte », le curseur du slider est associé au texte visible « Espacement des lettres » et le switch est associé à son libellé visible. Ces noms doivent être attribués aux éléments réels gérés par le builder, et non à des conteneurs décoratifs autour d’eux.

La syntaxe explicite du template applique ensemble les attributs et les actions. Pour les curseurs du slider, l’élément renvoyé inclut son action ; la boucle diffuse donc les attributs du curseur et appelle thumb.action. Lorsque vous stylisez la piste et la plage, préservez les valeurs de positionnement produites par le builder : elles décrivent l’état numérique réel et le sens de progression, tandis que la feuille de style définit la couleur et la géométrie.

- Vérifiez le résultat réellement calculé, pas seulement la valeur numérique affichée.

- Conservez les libellés sur les éléments natifs du builder.

- Respectez la réduction des animations pour les transitions visuelles personnalisées.

Consultez la spécification associée

## Système de design Melt UI : utilisez le builder vérifié API dans un projet Svelte standard

### Utiliser le générateur vérifié API dans un projet Svelte classique

Le composant complet utilise les abonnements aux stores de Svelte avec $alignment, $tracking et $grid. Svelte 5 peut compiler cette syntaxe de composant éprouvée ; le point d’entrée utilise sa fonction mount actuelle. Aucune bibliothèque d’icônes ni aucun package de feuille de style personnalisés ne sont nécessaires, car toute la couche visuelle est fournie ci-dessus.

La configuration Svelte standard de Vite ci-dessous fixe les versions de @melt-ui/svelte à 0.86.6 et de Svelte à 5.57.1. Elle n’installe pas le préprocesseur Melt, car le composant utilise déjà la syntaxe explicite équivalente. Lors de la migration vers le nouveau package runes, réécrivez intentionnellement le API au lieu de simplement changer la version de la dépendance.

Consultez la spécification associée

## Melt UI Exemples de composants du système de design

### Composition complète des builders store/action

createRadioGroup, createSlider et createSwitch ajoutent une sémantique native et un comportement au balisage ordinaire.

```
<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>
```

Référence du code

- La valeur du slider est un tableau ; l’affiche en lit le premier élément.

- Le code utilise des diffusions d’attributs et des actions explicites, sans dépendre d’un préprocesseur non mentionné.

- L’état enregistré est invalidé dès qu’un store du builder change.

### Styles complets de l’affiche d’origine et de ses contrôles

Variables CSS sémantiques, sélecteurs data-state pour les contrôles, anneaux de focus et affiche typographique adaptative.

```
:root{--study-canvas:#f3f0e9;--study-surface:#fffdf8;--study-ink:#32352e;--study-muted:#77796a;--study-line:#dbdece;--study-action:#486348;--study-on-action:#fff;--study-focus:#8aa77c;--study-poster:#e0e8bb;--study-accent:#d68f57;--study-space-1:4px;--study-space-2:8px;--study-space-3:12px;--study-space-4:16px;--study-space-6:24px;--study-space-8:32px}html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{background:var(--study-canvas);color:var(--study-ink);font-family:system-ui,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,[role=slider]:focus-visible{outline:3px solid var(--study-focus);outline-offset:4px}button:disabled{opacity:.45;cursor:default}.poster-shell{max-width:1060px;margin:auto;padding:32px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--study-muted)}h1{font-size:34px;line-height:1.15;max-width:650px;margin:12px 0}header>p:last-child{font-size:14px;line-height:1.7;color:var(--study-muted);max-width:620px}.poster-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;margin-top:28px}.controls{padding:24px;background:var(--study-surface);border:1px solid var(--study-line);border-radius:14px;align-self:start;min-width:0}.controls h2{font-size:20px;margin:0 0 24px}.control-label{font-size:12px;font-weight:600;margin:0 0 12px}.control-label strong{float:right;color:var(--study-action)}.alignment{display:flex;border:1px solid var(--study-line);padding:4px;border-radius:8px;gap:4px}.align-option{border:0;flex:1;padding:9px 4px;border-radius:5px;font-size:12px;background:transparent;color:var(--study-muted)}.align-option[data-state=checked]{background:var(--study-action);color:var(--study-on-action)}.tracking-control{margin-top:26px}.slider{position:relative;height:24px;display:flex;align-items:center;touch-action:none}.slider:before{content:'';height:4px;background:var(--study-line);position:absolute;inset:10px 0;border-radius:4px}.slider-range{height:4px;position:absolute;background:var(--study-action);border-radius:4px}.slider-thumb{height:20px;width:20px;border:2px solid var(--study-action);background:white;border-radius:50%;cursor:grab}.scale{display:flex;justify-content:space-between;font-size:10px;color:var(--study-muted);margin-top:8px}.grid-control{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--study-line);padding-top:22px;margin-top:24px;font-size:13px}.switch{width:42px;height:24px;padding:3px;border:0;border-radius:999px;background:#b7beaf;flex-shrink:0}.switch span{display:block;width:18px;height:18px;border-radius:50%;background:white;transition:transform .15s}.switch[data-state=checked]{background:var(--study-action)}.switch[data-state=checked] span{transform:translateX(18px)}.hint{font-size:11px;line-height:1.7;color:var(--study-muted);margin:12px 0 24px}.primary{display:block;width:100%;padding:12px;border:0;border-radius:7px;background:var(--study-action);color:white;font-size:13px;font-weight:600}.reset{width:100%;padding:12px 0;border:0;background:transparent;color:var(--study-muted);font-size:11px}.result{font-size:11px;line-height:1.7;color:var(--study-muted);margin:8px 0 0}.poster{background:var(--study-poster);padding:28px;border-radius:14px;min-width:0;overflow:hidden;position:relative}.poster.guides{background-image:linear-gradient(#6680561c 1px,transparent 1px),linear-gradient(90deg,#6680561c 1px,transparent 1px);background-size:24px 24px}.poster-top{display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:700;letter-spacing:.1em;position:relative;z-index:1}.poster-orbit{height:130px;position:relative;margin:10px 0 20px}.poster-orbit i{display:block;position:absolute;width:140px;height:140px;background:var(--study-accent);border-radius:50%;right:10%;top:0}.poster-orbit b{display:block;position:absolute;width:140px;height:140px;border:2px solid #617748;border-radius:50%;right:27%;top:0}.poster-title{font-size:clamp(28px,5.5vw,64px);line-height:1.08;font-weight:800;position:relative}.poster-title span{display:block}.poster-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid #9fac7c;margin-top:26px;padding-top:18px;font-size:11px;line-height:1.7}.poster-bottom p{margin:0}.poster-bottom>span{font-size:9px;color:#627046}@media(max-width:740px){.poster-layout{grid-template-columns:minmax(0,1fr)}.poster-shell{padding:20px}h1{font-size:29px}.poster-title{font-size:clamp(30px,9vw,56px)}}@media(max-width:360px){.poster-shell{padding:14px}.controls,.poster{padding:16px}.poster-title{font-size:28px}.poster-orbit{height:110px}.poster-orbit i,.poster-orbit b{width:115px;height:115px}.poster-top{font-size:8px}}@media(prefers-reduced-motion:reduce){.switch span{transition:none}}
```

Référence du code

- Tous les jetons visuels sont originaux ; ils ne correspondent pas aux valeurs par défaut officielles de Melt.

- La position du curseur et de la plage du slider provient des attributs natifs du builder.

- La visibilité de la grille décorative est indépendante de l’espacement.

## Melt UI Configuration de l’agent IA du système de design

### Point de départ de l’implémentation

Builders store/action API vérifiés de @melt-ui/svelte 0.86.6 avec Svelte 5.57.1. La syntaxe explicite du builder évite d’avoir à installer le préprocesseur Melt facultatif. Il ne s’agit pas du package runes de nouvelle génération distinct API.

```
// npm create vite@latest melt-type-study -- --template svelte
// cd melt-type-study && npm install
// npm install svelte@5.57.1 @melt-ui/svelte@0.86.6
// 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
```

### Un prompt pour votre projet

```
Utilisez les builders store/action de @melt-ui/svelte 0.86.6 avec Svelte 5 pour cette étude de composition typographique. Ajoutez à la fois des attributs et des actions aux éléments createRadioGroup, createSlider et createSwitch ; utilisez la syntaxe explicite fournie plutôt que de dépendre d’un préprocesseur non mentionné. Préservez le tableau à un élément du slider et le contrat elements.thumbs, les valeurs d’alignement et la visibilité de la grille. Liez les styles calculés de l’affiche directement à ces stores, invalidez le retour de confirmation enregistré après toute modification et réinitialisez les valeurs à left, [2] et true. N’intégrez ni le nouveau package runes API ni un modèle de rendez-vous.
```

## Melt UI Sources et périmètre du système de design

Builders store/action de @melt-ui/svelte 0.86.6 avec Svelte 5.57.1. Tous les jetons visuels et le contenu de l’affiche sont originaux. L’enregistrement ne conserve que l’état de l’aperçu local ; il n’exporte ni ne publie aucun design.

- Utilisation Attributs, actions et stores d’état du builder.

- Préprocesseur Pourquoi use:melt nécessite un prétraitement et son équivalent explicite.

- Groupe radio Sélection exclusive et navigation au clavier.

- Slider Valeurs sous forme de tableau, limites, sens et touches.

- Switch État booléen et sémantique.

- État contrôlé Stores inscriptibles et fonctions de modification.

- Installation Configuration d’un package versionné.

## Melt UI Ressources connexes du système de design

### Naive UI

Un espace de travail natif Naive UI pour les tableaux de données, avec des valeurs d’objet de thème vérifiées, la sélection et le développement des lignes, le tri, la pagination et une action locale de vérification par lot.

### Nuxt UI

Créez un compositeur de briefs Nuxt UI 4.11.3 complet, avec de véritables composants Vue, des références sémantiques au thème, la validation des champs et un comportement explicite pour les brouillons locaux.

### Oruga UI

Un éditeur de catalogue Oruga natif avec des étiquettes de sujet consultables et supprimables, des limites de vocabulaire appliquées, les véritables tokens d’un thème facultatif et une carte dynamique reflétant les étiquettes sélectionnées.


- [Référence de mise en œuvre](https://www.melt-ui.com/docs/builders/slider)
- [Source](https://www.melt-ui.com/docs/usage)
- [Source](https://www.melt-ui.com/docs/builders/slider)
- [Consultez la spécification associée](https://www.melt-ui.com/docs/usage)
- [Consultez la spécification associée](https://www.melt-ui.com/docs/preprocessor)
- [Consultez la spécification associée](https://www.melt-ui.com/docs/builders/radio-group)
- [Consultez la spécification associée](https://www.melt-ui.com/docs/builders/slider)
- [Consultez la spécification associée](https://www.melt-ui.com/docs/builders/switch)
- [Consultez la spécification associée](https://www.melt-ui.com/docs/controlled)
- [Consultez la spécification associée](https://www.melt-ui.com/docs/installation)
- [Référence du code](https://www.melt-ui.com/docs/usage)
- [Utilisation Attributs, actions et stores d’état du builder.](https://www.melt-ui.com/docs/usage)
- [Préprocesseur Pourquoi use:melt nécessite un prétraitement et son équivalent explicite.](https://www.melt-ui.com/docs/preprocessor)
- [Groupe radio Sélection exclusive et navigation au clavier.](https://www.melt-ui.com/docs/builders/radio-group)
- [Slider Valeurs sous forme de tableau, limites, sens et touches.](https://www.melt-ui.com/docs/builders/slider)
- [Switch État booléen et sémantique.](https://www.melt-ui.com/docs/builders/switch)
- [État contrôlé Stores inscriptibles et fonctions de modification.](https://www.melt-ui.com/docs/controlled)
- [Installation Configuration d’un package versionné.](https://www.melt-ui.com/docs/installation)