# Sistema de diseño Melt UI

## Vista previa de la interfaz del sistema de diseño Melt UI

Cambia la alineación, mueve el control deslizante del espaciado entre letras y activa o desactiva la cuadrícula; el póster original se actualiza con los stores del constructor.

## Referencia de diseño del sistema de diseño Melt UI

Generadores de stores y acciones de @melt-ui/svelte 0.86.6 verificados en ejecución con Svelte 5.57.1. Este es el generador documentado API, no los runes de nueva generación API, que son independientes. Melt no incluye estilos; todos los valores visuales --study-* que aparecen a continuación son configuración original de la aplicación, proporcionada íntegramente.

### Configuración visual semántica original

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --study-canvas | #f3f0e9 | Página exterior. |
| --study-surface | #fffdf8 | Panel de control. |
| --study-ink | #32352e | Texto principal. |
| --study-muted | #77796a | Texto complementario. |
| --study-line | #dbdece | Límites de la pista y el panel. |
| --study-action | #486348 | Radio seleccionado y rango activo. |
| --study-on-action | #fff | Texto sobre la acción. |
| --study-focus | #8aa77c | Indicador de foco del teclado. |
| --study-poster | #e0e8bb | Papel original del cartel. |
| --study-accent | #d68f57 | Forma orbital decorativa. |
### Escalas originales de espaciado y tipografía

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --study-space-1 | 4px | Espaciado con nombres definidos por la aplicación; no es un valor predeterminado de Melt. |
| --study-space-2 | 8px | Espaciado con nombres definidos por la aplicación; no es un valor predeterminado de Melt. |
| --study-space-3 | 12px | Espaciado con nombres definidos por la aplicación; no es un valor predeterminado de Melt. |
| --study-space-4 | 16px | Espaciado con nombres definidos por la aplicación; no es un valor predeterminado de Melt. |
| --study-space-6 | 24px | Espaciado con nombres definidos por la aplicación; no es un valor predeterminado de Melt. |
| --study-space-8 | 32px | Espaciado con nombres definidos por la aplicación; no es un valor predeterminado de Melt. |
| Text family | system-ui, sans-serif | Sin dependencia de fuentes remotas. |
| Page title | 34px / 1.15; 29px narrow | Jerarquía original de titulares. |
| Poster title | clamp(28px,5.5vw,64px); 28px below 360px | Escala original adaptable de tamaños de visualización. |
| Poster tracking | 0–8px, step 1; default 2px | Espaciado entre letras controlado realmente por el deslizador. |
| Grid spacing | 24px × 24px | Guías decorativas que se activan y desactivan con el interruptor nativo. |
| Focus ring | 3px solid #8aa77c; 4px offset | Tratamiento explícito de :focus-visible. |
### Contratos nativos de los generadores

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| createRadioGroup.defaultValue | left | Una alineación seleccionada. |
| Radio orientation / loop | horizontal / true | La navegación con flechas recorre un grupo horizontal y vuelve al inicio al llegar al final. |
| createSlider.defaultValue | [2] | El store contiene un array incluso cuando hay un solo control deslizante. |
| Slider min / max / step | 0 / 8 / 1 | Seguimiento de valores enteros con límites. |
| Slider elements.thumbs | Array-producing builder store | La versión 0.86.6 devuelve los controles deslizantes, no un elemento de control singular. |
| createSwitch.defaultChecked | true | Las guías comienzan visibles. |
| Builder attributes + action | {...$builder} use:builder | La sintaxis explícita funciona sin el preprocesador opcional de Melt. |
| Thumb attributes + action | {...thumb} use:thumb.action | Cada control deslizante generado tiene sus propios atributos y acción. |
## Melt UI Guía completa del sistema de diseño

Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real.

Orientación completa, un punto de partida para la implementación y enlaces al código fuente.

## Sistema de diseño Melt UI: Melt añade comportamiento al marcado que controlas

### Melt añade comportamiento al marcado que controlas

> Este ejemplo usa los generadores de store y acción API de @melt-ui/svelte 0.86.6. createRadioGroup, createSlider y createSwitch devuelven generadores de elementos y stores de estado. Los atributos y las acciones conectan botones, spans y divs corrientes con el comportamiento de los controles nativos.

El paquete no proporciona el papel verde, la tipografía del cartel ni la geometría del panel. Esas decisiones se definen en la hoja de estilos original completa. La documentación también hace referencia a unos runes más recientes API, que son independientes; esta página identifica deliberadamente la versión verificada de los generadores en lugar de mezclar ejemplos incompatibles de ambas generaciones.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: combina la propagación de atributos con la instalación de acciones

### Combina atributos spread y acciones en la instalación

Cada elemento necesita tanto los atributos de su generador como su acción. El ejemplo utiliza formas como {...$alignRoot} use:alignRoot y {...$alignItem(value)} use:alignItem. Los atributos aportan roles, estado y posicionamiento; la acción instala el comportamiento interactivo y su limpieza.

La sintaxis abreviada use:melt requiere el preprocesador opcional de Melt. Sin él, el entorno de ejecución genera un error específico en lugar de adjuntar el generador de forma silenciosa. El código corregido usa siempre la sintaxis explícita, por lo que la configuración de Vite que aparece a continuación no omite ninguna dependencia oculta de preprocesamiento. Del mismo modo, cada control deslizante propaga los atributos que devuelve e invoca thumb.action.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: define el sistema visual sin estilos en la capa de la aplicación CSS

### Define el sistema visual sin interfaz en el CSS de la aplicación

Los roles --study-* distinguen el lienzo exterior, la superficie de control, el texto, el separador, la acción, el foco, el papel del cartel y el acento decorativo. Los seis valores de espaciado con nombre abarcan de cuatro a treinta y dos píxeles. Son decisiones originales que permiten reproducir esta composición específica, no un catálogo de tokens mantenido por Melt.

Los botones de opción marcados y el interruptor usan data-state=checked, mientras que las posiciones en línea que devuelve el control deslizante determinan la ubicación del control y del rango seleccionado. La hoja de estilos solo añade geometría y colores. Sustituir esas posiciones nativas por porcentajes calculados manualmente duplicaría la lógica y podría interrumpir la compatibilidad con la orientación o la dirección.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: mantén una sola alineación seleccionada con la navegación nativa del grupo

### Mantén una sola alineación seleccionada con la navegación nativa del grupo

createRadioGroup comienza en left, con la orientación horizontal y el ciclo activados. Cada opción del grupo tiene un valor estable: left, center o right. El valor seleccionado se aplica directamente a text-align del cartel, por lo que la navegación con el teclado y la selección con el puntero afectan a la misma composición visible.

El grupo tiene la etiqueta accesible Alineación del texto. Las tres opciones son controles de opción respaldados por los generadores nativos, no botones corrientes con clases que se alternan manualmente. Su estado marcado se refleja tanto en la semántica como en el selector data-state, que aplica el tratamiento visual de relleno.

1. Elige Centrar y observa la alineación del cartel.

2. Enfoca el deslizador Espaciado entre letras y pulsa End para llegar a 8px.

3. Desactiva la cuadrícula de diseño y guarda la composición local resultante.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: trata el valor como un array incluso con un solo control deslizante

### Trata el valor como una matriz incluso cuando haya un solo control deslizante

El control deslizante comienza con defaultValue:[2], no con un valor escalar. El generador instalado en la versión 0.86.6 expone elements.thumbs, un store que produce un array, y la plantilla representa cada control devuelto. El cartel lee $tracking[0] y aplica el valor como espaciado entre letras en píxeles.

Los límites van de cero a ocho, en incrementos de uno. Home y End llevan a los límites; las teclas de flecha avanzan según el incremento definido. Lee $tracking[0] para esta composición de un solo control deslizante y conserva el modelo de array al añadir otro, en vez de introducir un segundo estado escalar sin relación.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: mantén la guía visual separada de los valores de diseño

### Mantén la guía visual separada de los valores de diseño

createSwitch comienza activado, y su estado controla una clase guides en el cartel. Esa clase dibuja dos gradientes de cuadrícula repetidos y sutiles, separados por intervalos de veinticuatro píxeles. Al desactivarla, los gradientes desaparecen sin cambiar la alineación ni el espaciado entre letras.

La etiqueta visible Mostrar cuadrícula de diseño está asociada al ID estable del interruptor. El movimiento del control se anima con una transición CSS, con una regla alternativa para reducir el movimiento. La ilustración orbital decorativa tiene aria-hidden y no admite interacción; no compite con la semántica de los controles reales.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: coordina los stores modificables sin duplicar el estado de los controles

### Coordina los stores de escritura sin duplicar el estado de control

La alineación, el espaciado y la visibilidad de la cuadrícula siguen siendo los stores modificables de los generadores. El cartel representado lee esos stores directamente: text-align usa la alineación, letter-spacing usa el primer valor del control deslizante y una clase CSS usa el valor marcado del interruptor. Mantener un modelo de aplicación independiente para esos mismos tres ajustes generaría trabajo de sincronización innecesario.

La instantánea guardada se obtiene de una firma de esos valores. Cualquier cambio elimina la confirmación, y el restablecimiento vuelve a escribir left, [2] y true en los stores. La matriz de un elemento es importante: asignar el escalar 2 no cumpliría el contrato de valor del control deslizante, aunque solo se vea un control.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: asigna a cada constructor sus atributos, acción y nombre

### Asigna a cada constructor sus atributos, acción y nombre

El grupo de opciones recibe la etiqueta de alineación del texto, el control deslizante se refiere al texto visible «Espaciado entre letras» y el interruptor está asociado a su etiqueta visible. Esos nombres deben estar en los elementos reales respaldados por constructores, no en contenedores decorativos circundantes.

La sintaxis explícita de la plantilla instala conjuntamente los atributos y las acciones. En el caso de los controles deslizantes, el elemento devuelto incluye su acción, así que el bucle distribuye los atributos del control e invoca thumb.action. Al aplicar estilos a la pista y al rango, conserva el posicionamiento que genera el constructor: describe el estado numérico real y la dirección, mientras que la hoja de estilos proporciona el color y la geometría.

- Comprueba el resultado calculado real, no solo la etiqueta numérica.

- Mantén las etiquetas en los elementos nativos del constructor.

- Respeta la preferencia de movimiento reducido en las transiciones visuales personalizadas.

Consulta la especificación complementaria

## Sistema de diseño Melt UI: usa el constructor verificado API en un proyecto Svelte convencional

### Usa el constructor verificado API en un proyecto Svelte normal

El componente completo usa las suscripciones a stores de Svelte con $alignment, $tracking y $grid. Svelte 5 puede compilar esta sintaxis establecida para componentes; el punto de entrada usa la función de montaje actual. No hace falta ninguna biblioteca de iconos personalizada ni paquete de hojas de estilos, porque toda la capa visual se proporciona arriba.

La configuración estándar de Vite con Svelte que aparece a continuación fija @melt-ui/svelte 0.86.6 y Svelte 5.57.1. No instala el preprocesador de Melt, ya que el componente usa la sintaxis explícita equivalente. Al migrar al paquete más reciente de runes, reescribe API de forma intencionada en lugar de cambiar solo la versión de la dependencia.

Consulta la especificación complementaria

## Melt UI Ejemplos de componentes del sistema de diseño

### Composición completa de constructores de stores y acciones

createRadioGroup, createSlider y createSwitch añaden semántica y comportamiento nativos al marcado común.

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

Referencia de código

- El valor del control deslizante es una matriz; el póster lee su primer elemento.

- El código usa distribuciones explícitas de atributos y acciones, sin depender de un preprocesador no indicado.

- El estado guardado caduca cuando cambia cualquier store del constructor.

### Estilos originales completos del póster y los controles

Variables CSS semánticas, selectores data-state para controles, anillos de foco y un póster tipográfico adaptable.

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

Referencia de código

- Todos los tokens visuales son originales; no son valores predeterminados oficiales de Melt.

- Las posiciones del control y del rango del control deslizante proceden de los atributos nativos del constructor.

- La visibilidad de la cuadrícula decorativa es independiente del espaciado.

## Melt UI Configuración del agente de IA del sistema de diseño

### Punto de partida para la implementación

API verificados de stores y acciones de @melt-ui/svelte 0.86.6 en Svelte 5.57.1. La sintaxis explícita del constructor evita tener que usar el preprocesador opcional de Melt. No se trata del API independiente de la nueva generación de runes.

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

### Una instrucción para tu proyecto

```
Usa los constructores de stores y acciones de @melt-ui/svelte 0.86.6 con Svelte 5 para el estudio de composición tipográfica. Añade tanto atributos como acciones a los elementos createRadioGroup, createSlider y createSwitch; utiliza la sintaxis explícita proporcionada en lugar de depender de un preprocesador no indicado. Conserva la matriz de un elemento del control deslizante y el contrato elements.thumbs, los valores de alineación y la visibilidad de la cuadrícula. Vincula los estilos calculados del póster directamente a estos stores, invalida la confirmación guardada después de los cambios y restablece a left, [2] y true. No combines esto con las nuevas API de runes ni con un modelo de citas.
```

## Melt UI Fuentes y alcance del sistema de diseño

Constructores de stores y acciones de @melt-ui/svelte 0.86.6 con Svelte 5.57.1. Todos los tokens visuales y el contenido del póster son originales. Guardar solo registra el estado de la vista previa local; no exporta ni publica un diseño.

- Uso Atributos, acciones y stores de estado del constructor.

- Preprocesador Por qué use:melt requiere preprocesamiento y cuál es su equivalente explícito.

- Grupo de opciones Selección exclusiva y navegación con el teclado.

- Slider Valores de matriz, límites, dirección y teclas.

- Switch Estado booleano y semántica.

- Estado controlado Stores modificables y funciones de cambio.

- Instalación Configuración del paquete con versiones fijadas.

## Melt UI Recursos relacionados con el sistema de diseño

### Naive UI

Un banco de trabajo de tablas nativo de Naive UI con valores verificados del objeto de tema, selección de filas, expansión, ordenación, paginación y una acción local para revisar lotes.

### Nuxt UI

Crea un compositor de informes completo con Nuxt UI 4.11.3, componentes reales de Vue, referencias semánticas al tema, validación de entradas y un comportamiento explícito para borradores locales.

### Oruga UI

Un editor de catálogos nativo de Oruga con etiquetas temáticas que se pueden buscar y quitar, límites de vocabulario aplicados, los tokens reales de un tema opcional y una tarjeta dinámica que refleja las etiquetas seleccionadas.


- [Referencia de implementación](https://www.melt-ui.com/docs/builders/slider)
- [Fuente](https://www.melt-ui.com/docs/usage)
- [Fuente](https://www.melt-ui.com/docs/builders/slider)
- [Consulta la especificación complementaria](https://www.melt-ui.com/docs/usage)
- [Consulta la especificación complementaria](https://www.melt-ui.com/docs/preprocessor)
- [Consulta la especificación complementaria](https://www.melt-ui.com/docs/builders/radio-group)
- [Consulta la especificación complementaria](https://www.melt-ui.com/docs/builders/slider)
- [Consulta la especificación complementaria](https://www.melt-ui.com/docs/builders/switch)
- [Consulta la especificación complementaria](https://www.melt-ui.com/docs/controlled)
- [Consulta la especificación complementaria](https://www.melt-ui.com/docs/installation)
- [Referencia de código](https://www.melt-ui.com/docs/usage)
- [Uso Atributos, acciones y stores de estado del constructor.](https://www.melt-ui.com/docs/usage)
- [Preprocesador Por qué use:melt requiere preprocesamiento y cuál es su equivalente explícito.](https://www.melt-ui.com/docs/preprocessor)
- [Grupo de opciones Selección exclusiva y navegación con el teclado.](https://www.melt-ui.com/docs/builders/radio-group)
- [Slider Valores de matriz, límites, dirección y teclas.](https://www.melt-ui.com/docs/builders/slider)
- [Switch Estado booleano y semántica.](https://www.melt-ui.com/docs/builders/switch)
- [Estado controlado Stores modificables y funciones de cambio.](https://www.melt-ui.com/docs/controlled)
- [Instalación Configuración del paquete con versiones fijadas.](https://www.melt-ui.com/docs/installation)