# Дизайн-система Melt UI

## Предварительный просмотр интерфейса дизайн-системы Melt UI

Измените выравнивание, передвиньте ползунок межбуквенного интервала и переключите сетку — исходный постер обновится на основе хранилищ билдеров.

## Дизайн-референс дизайн-системы Melt UI

Проверенные билдеры store/action из @melt-ui/svelte 0.86.6, работающие в Svelte 5.57.1. Здесь используется документированный билдер API, а не отдельный вариант API нового поколения на рунах. Melt не задаёт визуальное оформление; все значения --study-* ниже — исходные настройки приложения, приведённые полностью.

### Исходные семантические визуальные настройки

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --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 | Именованные интервалы приложения; не значения по умолчанию для Melt. |
| --study-space-2 | 8px | Именованные интервалы приложения; не значения по умолчанию для Melt. |
| --study-space-3 | 12px | Именованные интервалы приложения; не значения по умолчанию для Melt. |
| --study-space-4 | 16px | Именованные интервалы приложения; не значения по умолчанию для Melt. |
| --study-space-6 | 24px | Именованные интервалы приложения; не значения по умолчанию для Melt. |
| --study-space-8 | 32px | Именованные интервалы приложения; не значения по умолчанию для Melt. |
| Text family | system-ui, sans-serif | Нет зависимости от удалённого шрифта. |
| Page title | 34px / 1.15; 29px narrow | Исходная иерархия заголовков. |
| Poster title | clamp(28px,5.5vw,64px); 28px below 360px | Исходная адаптивная шкала размеров. |
| Poster tracking | 0–8px, step 1; default 2px | Межбуквенный интервал, управляемый ползунком. |
| Grid spacing | 24px × 24px | Декоративные направляющие, включаемые встроенным переключателем. |
| Focus ring | 3px solid #8aa77c; 4px offset | Явное оформление :focus-visible. |
### Контракты встроенных билдеров

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| createRadioGroup.defaultValue | left | Выбран один вариант выравнивания. |
| Radio orientation / loop | horizontal / true | Навигация стрелками проходит по горизонтальной группе и зацикливается. |
| createSlider.defaultValue | [2] | Хранилище содержит массив даже для одного ползунка. |
| Slider min / max / step | 0 / 8 / 1 | Отслеживание целых чисел в заданном диапазоне. |
| Slider elements.thumbs | Array-producing builder store | В версии 0.86.6 возвращается массив thumbs, а не отдельный элемент thumb. |
| createSwitch.defaultChecked | true | Направляющие изначально отображаются. |
| Builder attributes + action | {...$builder} use:builder | Явный синтаксис работает без необязательного препроцессора Melt. |
| Thumb attributes + action | {...thumb} use:thumb.action | Каждый созданный thumb получает собственные атрибуты и действие. |
## Полное руководство по дизайн-системе Melt UI

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система Melt UI: Melt добавляет поведение к вашей разметке

### Melt добавляет поведение к вашей разметке

> В этом примере используются билдеры store/action API из @melt-ui/svelte 0.86.6. createRadioGroup, createSlider и createSwitch возвращают билдеры элементов и хранилища состояния. Атрибуты и действия связывают обычные кнопки, span и div с поведением встроенных элементов управления.

Пакет не предоставляет зелёную бумагу, типографику постера или геометрию панели. Эти решения заданы в полной исходной таблице стилей. В документации также описан отдельный, более новый вариант API на рунах; на этой странице намеренно указан проверенный вариант билдера, чтобы не смешивать несовместимые примеры двух поколений.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: одновременно передавайте атрибуты и подключайте действия

### Одновременно передавайте атрибуты и подключайте действия

Элементу нужны и атрибуты билдера, и его действие. В примере используются выражения вида {...$alignRoot} use:alignRoot и {...$alignItem(value)} use:alignItem. Атрибуты задают роли, состояние и позиционирование; действие подключает интерактивное поведение и очистку.

Краткий синтаксис use:melt требует необязательного препроцессора Melt. Без него во время выполнения возникает конкретная ошибка: билдер не подключается незаметно и без предупреждения. В исправленном коде везде используется явный синтаксис, поэтому приведённая ниже настройка Vite не скрывает зависимость от препроцессора. Каждый ползунок также передаёт возвращённые атрибуты и вызывает thumb.action.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: определите визуальную систему безголового компонента в приложении CSS

### Определите визуальную систему безголового компонента в приложении CSS

Роли --study-* различают внешнее полотно, поверхность управления, текст, разделитель, действие, фокус, бумагу постера и декоративный акцент. Шесть именованных значений интервалов охватывают диапазон от четырёх до тридцати двух пикселей. Это исходные решения, позволяющие воспроизвести именно эту композицию, а не каталог токенов, поддерживаемый Melt.

Выбранные радиокнопки и переключатель используют data-state=checked, а возвращаемые ползунком встроенные позиции определяют расположение бегунка и выбранного диапазона. Таблица стилей задаёт только их геометрию и цвета. Замена встроенных позиций вычисленными вручную процентами дублировала бы логику и могла бы нарушить поддержку ориентации или направления.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: сохраняйте один выбранный вариант выравнивания с помощью встроенной навигации по группе

### Сохраняйте один выбранный вариант выравнивания с помощью встроенной навигации по группе

createRadioGroup изначально выбирает left; горизонтальная ориентация и циклическая навигация включены. У каждого элемента группы есть неизменное значение: left, center или right. Свойство text-align постера напрямую считывает выбранное значение, поэтому навигация с клавиатуры и выбор указателем изменяют одну и ту же видимую композицию.

Группа получает доступную метку «Выравнивание текста». Три варианта — это встроенные радиокнопки, созданные билдерами, а не обычные кнопки с классами, переключаемыми вручную. Выбранное состояние отражается и в семантике, и в селекторе data-state, который задаёт заливку.

1. Выберите «По центру» и посмотрите, как изменится выравнивание постера.

2. Перейдите к ползунку «Межбуквенный интервал» и нажмите End, чтобы установить значение 8px.

3. Отключите сетку и сохраните получившуюся композицию локально.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: используйте массив в качестве значения, даже если ползунок один

### Используйте массив в качестве значения, даже если ползунок один

В ползунке задано начальное значение defaultValue:[2], а не скаляр. В установленной версии билдера 0.86.6 доступно хранилище elements.thumbs, возвращающее массив; шаблон отображает каждый возвращённый бегунок. Постер считывает $tracking[0] и использует это значение в пикселях для межбуквенного интервала.

Диапазон — от нуля до восьми с шагом в единицу. Клавиши Home и End устанавливают минимальное и максимальное значения, а клавиши со стрелками перемещают бегунок на заданный шаг. В композиции с одним бегунком читайте $tracking[0]; при добавлении ещё одного сохраните модель массива, а не вводите отдельное, не связанное с ней скалярное состояние.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: отделите визуальную сетку от значений дизайна

### Отделите визуальную сетку от значений дизайна

createSwitch изначально включён, а его состояние управляет классом guides на постере. Этот класс создаёт два едва заметных повторяющихся градиента сетки с интервалом в двадцать четыре пикселя. При отключении переключателя градиенты исчезают, а выравнивание и межбуквенный интервал не меняются.

Видимая метка «Показать сетку макета» связана с неизменным ID переключателя. Бегунок переключателя перемещается с переходом CSS; для пользователей, предпочитающих уменьшенное движение, предусмотрено переопределение. Декоративная иллюстрация орбиты скрыта от вспомогательных технологий через aria-hidden и не интерактивна, поэтому не мешает семантике настоящих элементов управления.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: координируйте изменяемые хранилища без дублирования состояния элементов управления

### Координируйте изменяемые хранилища без дублирования состояния элементов управления

Выравнивание, интервал и видимость сетки остаются изменяемыми хранилищами билдеров. Отрисованный постер считывает эти хранилища напрямую: выравнивание управляет text-align, первое значение ползунка — letter-spacing, а класс CSS — значением checked переключателя. Отдельная модель приложения для тех же трёх настроек создала бы ненужную задачу синхронизации.

Сохранённый снимок состояния вычисляется по сигнатуре этих значений. При любом изменении подтверждение сбрасывается, а сброс записывает в хранилища left, [2] и true. Важен именно массив из одного элемента: скалярное значение 2 не соответствовало бы контракту ползунка, хотя виден только один бегунок.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: назначьте каждому билдеру атрибуты, действие и название

### Назначьте каждому билдеру атрибуты, действие и название

Группа переключателей получает метку «Выравнивание текста», ползунок ссылается на видимый текст «Межбуквенный интервал», а переключатель связан со своей видимой меткой. Эти названия должны назначаться самим элементам, созданным билдерами, а не окружающим декоративным обёрткам.

Явный синтаксис шаблона позволяет одновременно добавлять атрибуты и действия. Для ползунков возвращаемый элемент включает действие, поэтому в цикле нужно раскрыть атрибуты ползунка и вызвать thumb.action. При стилизации дорожки и заполненной части сохраняйте позиционирование, которое предоставляет конструктор: оно отражает фактическое числовое состояние и направление, а таблица стилей задаёт цвет и геометрию.

- Проверьте фактический вычисленный результат, а не только числовую подпись.

- Оставьте подписи на элементах нативного конструктора.

- Учитывайте настройку уменьшения анимации при создании пользовательских визуальных переходов.

Прочитать вспомогательную спецификацию

## Дизайн-система Melt UI: используйте проверенный конструктор API в обычном проекте Svelte

### Используйте проверенный билдер API в обычном проекте Svelte

В полном компоненте используются подписки на хранилища Svelte: $alignment, $tracking и $grid. Svelte 5 может компилировать этот сложившийся синтаксис компонентов; точка входа использует актуальную функцию mount. Пользовательская библиотека значков и пакет таблиц стилей не нужны: весь визуальный слой описан выше.

В стандартной настройке Vite и Svelte ниже зафиксированы версии @melt-ui/svelte 0.86.6 и Svelte 5.57.1. Препроцессор Melt не устанавливается, поскольку компонент использует явный эквивалентный синтаксис. При переходе на более новый пакет runes перепишите API намеренно, а не просто измените версию зависимости.

Прочитать вспомогательную спецификацию

## Melt UI Примеры компонентов дизайн-системы

### Полная композиция конструкторов на основе хранилищ и действий

createRadioGroup, createSlider и createSwitch добавляют нативную семантику и поведение обычной разметке.

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

Справочник по коду

- Значение ползунка — массив; плакат использует его первый элемент.

- В коде используются явное раскрытие атрибутов и действия, поэтому не требуется неуказанный препроцессор.

- Сохранённое состояние сбрасывается при изменении любого хранилища конструктора.

### Полные стили исходного плаката и элементов управления

Семантические переменные CSS, селекторы data-state для элементов управления, индикаторы фокуса и плакат с адаптивной типографикой.

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

Справочник по коду

- Все визуальные токены созданы специально и не являются официальными настройками Melt по умолчанию.

- Позиции бегунка и заполненной части ползунка задаются нативными атрибутами конструктора.

- Видимость декоративной сетки не зависит от интервала.

## Melt UI Настройка агента дизайн-системы

### Отправная точка для реализации

Проверенные конструкторы на основе хранилищ и действий API из @melt-ui/svelte 0.86.6 в Svelte 5.57.1. Явный синтаксис конструктора позволяет обойтись без необязательного препроцессора Melt. Это не отдельный пакет runes 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
```

### Запрос для вашего проекта

```
Используйте конструкторы на основе хранилищ и действий из @melt-ui/svelte 0.86.6 с Svelte 5 для исследования типографической композиции. Добавьте и атрибуты, и действия к элементам createRadioGroup, createSlider и createSwitch; используйте предложенный явный синтаксис без неуказанного препроцессора. Сохраняйте массив из одного элемента для значения ползунка и контракт elements.thumbs, значения выравнивания и видимость сетки. Привязывайте вычисленные стили плаката непосредственно к этим хранилищам, сбрасывайте сохранённый результат после изменений и возвращайте исходные значения: left, [2] и true. Не смешивайте это с более новыми runes API или моделью записи на приём.
```

## Melt UI Источники и область применения дизайн-системы

Конструкторы на основе хранилищ и действий из @melt-ui/svelte 0.86.6 с Svelte 5.57.1. Все визуальные токены и содержимое плаката созданы специально. Сохранение записывает только локальное состояние предпросмотра и не экспортирует и не публикует дизайн.

- Использование Атрибуты, действия и хранилища состояния конструктора.

- Препроцессор Зачем нужен препроцессор для use:melt и его явный эквивалент.

- Группа переключателей Исключающий выбор и навигация с клавиатуры.

- Slider Массив значений, ограничения, направление и клавиши.

- Switch Логическое состояние и семантика.

- Управляемое состояние Записываемые хранилища и функции изменения.

- Установка Настройка пакетов с фиксированными версиями.

## Melt UI Связанные ресурсы дизайн-системы

### Naive UI

Рабочая среда для таблиц на основе Naive UI: проверенные значения объектов темы, выбор строк, раскрытие, сортировка, пагинация и локальное действие для пакетной проверки.

### Nuxt UI

Создайте полноценный редактор брифов на Nuxt UI 4.11.3 с реальными компонентами Vue, семантическими ссылками на тему, проверкой ввода и явным управлением локальными черновиками.

### Oruga UI

Встроенный редактор каталога Oruga с поиском и удалением тематических тегов, ограничениями словаря, реальными токенами необязательной темы и динамической карточкой, которая отражает выбранные метки.


- [Справочник по реализации](https://www.melt-ui.com/docs/builders/slider)
- [Источник](https://www.melt-ui.com/docs/usage)
- [Источник](https://www.melt-ui.com/docs/builders/slider)
- [Прочитать вспомогательную спецификацию](https://www.melt-ui.com/docs/usage)
- [Прочитать вспомогательную спецификацию](https://www.melt-ui.com/docs/preprocessor)
- [Прочитать вспомогательную спецификацию](https://www.melt-ui.com/docs/builders/radio-group)
- [Прочитать вспомогательную спецификацию](https://www.melt-ui.com/docs/builders/slider)
- [Прочитать вспомогательную спецификацию](https://www.melt-ui.com/docs/builders/switch)
- [Прочитать вспомогательную спецификацию](https://www.melt-ui.com/docs/controlled)
- [Прочитать вспомогательную спецификацию](https://www.melt-ui.com/docs/installation)
- [Справочник по коду](https://www.melt-ui.com/docs/usage)
- [Использование Атрибуты, действия и хранилища состояния конструктора.](https://www.melt-ui.com/docs/usage)
- [Препроцессор Зачем нужен препроцессор для use:melt и его явный эквивалент.](https://www.melt-ui.com/docs/preprocessor)
- [Группа переключателей Исключающий выбор и навигация с клавиатуры.](https://www.melt-ui.com/docs/builders/radio-group)
- [Slider Массив значений, ограничения, направление и клавиши.](https://www.melt-ui.com/docs/builders/slider)
- [Switch Логическое состояние и семантика.](https://www.melt-ui.com/docs/builders/switch)
- [Управляемое состояние Записываемые хранилища и функции изменения.](https://www.melt-ui.com/docs/controlled)
- [Установка Настройка пакетов с фиксированными версиями.](https://www.melt-ui.com/docs/installation)