# Melt UI 디자인 시스템 ## Melt UI 디자인 시스템 인터페이스 미리보기 정렬을 바꾸고 자간 슬라이더를 움직인 다음 그리드를 전환해 보세요. 빌더 스토어에 따라 원본 포스터가 업데이트됩니다. ## Melt UI 디자인 시스템 디자인 참고 자료 Svelte 5.57.1에서 실행되는 @melt-ui/svelte 0.86.6의 store/action 빌더를 검증했습니다. 이는 문서화된 빌더 API이며, 별도의 차세대 runes 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은 단일 thumb 요소가 아니라 thumbs를 반환합니다. | | createSwitch.defaultChecked | true | 안내선은 처음에 표시됩니다. | | Builder attributes + action | {...$builder} use:builder | Melt 옵션 전처리기 없이 명시적 구문을 사용할 수 있습니다. | | Thumb attributes + action | {...thumb} use:thumb.action | 생성된 각 thumb에는 고유한 속성과 액션이 포함됩니다. | ## Melt UI 디자인 시스템 완벽 가이드 실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드. 완전한 안내와 구현 시작점, 소스 링크. ## Melt UI 디자인 시스템: Melt는 동작을 마크업에 연결합니다 ### Melt로 직접 작성한 마크업에 동작 연결하기 > 이 예제는 @melt-ui/svelte 0.86.6의 store/action API를 사용합니다. createRadioGroup, createSlider, createSwitch는 요소 빌더와 상태 스토어를 반환합니다. 일반 button, span, div 요소에 속성과 액션을 적용하면 네이티브 컨트롤 동작과 연결됩니다. 이 패키지는 녹색 종이 질감, 포스터 타이포그래피 또는 패널 형태를 제공하지 않습니다. 이러한 요소는 완전한 원본 스타일시트에서 직접 정의합니다. 문서에는 별도의 최신 runes API도 소개되어 있지만, 이 페이지에서는 서로 호환되지 않는 두 세대의 예제를 섞지 않고 검증된 빌더 버전을 명시합니다. 지원 사양 읽기 ## Melt UI 디자인 시스템: 속성을 펼치고 액션을 함께 적용합니다 ### 속성 전달과 액션을 함께 설치하기 요소에는 빌더 속성과 액션이 모두 필요합니다. 이 예제에서는 {...$alignRoot} use:alignRoot, {...$alignItem(value)} use:alignItem와 같은 형식을 사용합니다. 속성은 역할, 상태, 위치 지정을 전달하고, 액션은 인터랙티브 동작과 정리를 설정합니다. 간결한 use:melt 구문을 사용하려면 Melt의 선택적 전처리기가 필요합니다. 전처리기 없이 사용하면 빌더가 조용히 적용되지 않고 구체적인 런타임 오류가 발생합니다. 수정된 코드는 모든 곳에서 명시적 구문을 사용하므로 아래 Vite 설정에서 전처리기 의존성을 누락하지 않습니다. 각 슬라이더 thumb 역시 반환된 속성을 펼치고 thumb.action을 호출합니다. 지원 사양 읽기 ## Melt UI 디자인 시스템: 애플리케이션에서 헤드리스 시각 시스템을 정의합니다 CSS ### 애플리케이션 CSS에서 헤드리스 시각 시스템 정의하기 --study-* 역할은 바깥 캔버스, 컨트롤 표면, 텍스트, 구분선, 액션, 포커스, 포스터 용지, 장식용 강조 색을 구분합니다. 이름이 지정된 여섯 가지 간격은 4픽셀부터 32픽셀까지입니다. 이는 이 구성을 재현 가능하게 하려고 직접 정한 값이며, Melt가 관리하는 토큰 카탈로그가 아닙니다. 선택된 라디오 버튼과 스위치는 data-state=checked를 사용합니다. 슬라이더에서 반환하는 인라인 위치 값은 thumb와 선택된 범위가 나타날 위치를 결정합니다. 스타일시트는 여기에 형태와 색상만 더합니다. 네이티브 위치를 직접 계산한 백분율로 대체하면 로직이 중복되고 방향이나 진행 방향 지원이 깨질 수 있습니다. 지원 사양 읽기 ## Melt UI 디자인 시스템: 네이티브 그룹 탐색으로 정렬 옵션 하나를 선택합니다 ### 기본 그룹 탐색으로 정렬 하나만 선택된 상태 유지하기 createRadioGroup은 왼쪽 정렬을 기본값으로 사용하고, 가로 방향과 순환 탐색을 활성화합니다. 각 라디오 항목에는 left, center, right라는 고정 값이 있습니다. 포스터의 text-align은 선택된 값을 바로 읽으므로 키보드 탐색과 포인터 선택이 같은 시각적 구성에 반영됩니다. 그룹에는 접근 가능한 Text alignment 레이블이 지정됩니다. 세 가지 옵션은 클래스를 수동으로 전환하는 일반 버튼이 아니라 네이티브 빌더가 연결된 라디오 컨트롤입니다. 선택 상태는 시맨틱 정보와 채워진 스타일에 사용하는 data-state 선택자 모두에 반영됩니다. 1. Center를 선택하고 포스터 정렬을 확인하세요. 2. Letter spacing 슬라이더에 포커스를 놓고 End 키를 눌러 8px로 설정하세요. 3. 레이아웃 그리드를 끄고 결과 구성을 로컬에 저장하세요. 지원 사양 읽기 ## Melt UI 디자인 시스템: thumb가 하나여도 값은 배열로 다룹니다 ### 엄지가 하나뿐이어도 값을 배열로 처리하기 슬라이더는 스칼라 값이 아니라 defaultValue:[2]로 시작합니다. 설치된 0.86.6 빌더는 elements.thumbs와 배열을 반환하는 스토어를 제공하며, 템플릿은 반환된 thumb를 각각 렌더링합니다. 포스터는 $tracking[0]을 읽어 픽셀 단위 자간 값으로 적용합니다. 범위는 0부터 8까지이며 간격은 1입니다. Home과 End 키로 범위 끝에 도달하고, 화살표 키로 지정된 간격만큼 이동할 수 있습니다. thumb가 하나뿐인 이 구성에서는 $tracking[0]을 읽고, thumb를 추가할 때는 별개의 스칼라 상태를 새로 만들지 말고 배열 모델을 유지하세요. 지원 사양 읽기 ## Melt UI 디자인 시스템: 시각 안내선과 디자인 값을 분리합니다 ### 시각적 가이드와 디자인 값을 분리하기 createSwitch는 켜진 상태로 시작하며, 상태에 따라 포스터에 guides 클래스를 적용합니다. 이 클래스는 24픽셀 간격의 은은한 반복 그리드 그라데이션 두 개를 그립니다. 스위치를 끄면 정렬이나 자간은 바뀌지 않고 그라데이션만 제거됩니다. 화면에 표시되는 Show layout grid 레이블은 스위치의 고정 ID와 연결됩니다. thumb 이동에는 CSS 전환 효과가 적용되며, 모션 감소 설정을 위한 재정의도 제공됩니다. 장식용 궤도 일러스트에는 aria-hidden이 적용되어 있고 인터랙션이 없습니다. 실제 컨트롤의 시맨틱 정보와 혼동되지 않습니다. 지원 사양 읽기 ## Melt UI 디자인 시스템: 컨트롤 상태를 중복하지 않고 쓰기 가능한 스토어를 활용합니다 ### 제어 상태를 중복하지 않고 쓰기 가능한 스토어 조정하기 정렬, 자간, 그리드 표시 여부는 빌더의 쓰기 가능한 스토어에 유지됩니다. 렌더링되는 포스터는 해당 스토어를 직접 읽습니다. text-align은 정렬 값을 사용하고, letter-spacing은 슬라이더 값의 첫 항목을 사용하며, CSS 클래스는 스위치의 checked 값을 사용합니다. 같은 세 가지 설정을 별도의 애플리케이션 모델에 중복하면 불필요한 동기화 작업이 생깁니다. 저장된 스냅샷은 해당 값의 시그니처를 바탕으로 생성됩니다. 값이 바뀌면 확인 상태가 해제되고, 초기화하면 스토어에 left, [2], true가 다시 기록됩니다. 배열의 요소가 하나뿐이어도 배열이어야 합니다. 슬라이더의 값 계약과 일치하지 않으므로 썸이 하나만 보여도 스칼라 값 2를 할당하면 안 됩니다. 지원 사양 읽기 ## Melt UI 디자인 시스템: 각 빌더에 속성, 액션, 이름 지정하기 ### 각 빌더에 속성, 액션, 이름 지정하기 라디오 그룹에는 ‘텍스트 정렬’ 레이블을 지정하고, 슬라이더 썸은 화면에 표시되는 ‘자간’ 텍스트를 참조하며, 스위치는 화면에 표시되는 레이블과 연결합니다. 이러한 이름은 주변의 장식용 래퍼가 아니라 실제 빌더가 적용된 요소에 지정해야 합니다. 명시적 템플릿 구문을 사용하면 속성과 액션을 함께 적용할 수 있습니다. 슬라이더 썸의 경우 반환된 항목에 액션이 포함되므로, 반복문에서 썸 속성을 펼치고 thumb.action을 호출합니다. 트랙과 범위의 스타일을 지정할 때는 빌더가 제공하는 위치 지정 결과를 그대로 유지하세요. 이 결과는 실제 숫자 상태와 방향을 나타내며, 색상과 기하학적 형태는 스타일시트에서 지정합니다. - 숫자 레이블만 보지 말고 실제 계산된 출력 결과를 확인하세요. - 레이블은 기본 빌더 요소에 지정하세요. - 사용자가 동작 줄이기를 요청한 경우 사용자 지정 시각 전환 효과를 적용하지 마세요. 지원 사양 읽기 ## Melt UI 디자인 시스템: 일반적인 Svelte 프로젝트에서 검증된 빌더 API 사용하기 ### 일반적인 Svelte 프로젝트에서 검증된 빌더 API 사용하기 완성된 컴포넌트는 $alignment, $tracking, $grid를 사용하는 Svelte 스토어 구독을 활용합니다. Svelte 5에서는 이 기존 컴포넌트 구문을 컴파일할 수 있으며, 진입점에서는 현재 마운트 함수를 사용합니다. 전체 시각적 레이어를 앞에서 제공하므로 사용자 지정 아이콘 라이브러리나 스타일시트 패키지는 필요하지 않습니다. 아래의 표준 Vite Svelte 설정은 @melt-ui/svelte 0.86.6과 Svelte 5.57.1을 고정 버전으로 사용합니다. 컴포넌트에서 이미 이에 상응하는 명시적 구문을 사용하므로 Melt 전처리기는 설치하지 않습니다. 최신 runes 패키지로 이전할 때는 의존성 버전만 바꾸지 말고 API를 의도에 맞게 다시 작성하세요. 지원 사양 읽기 ## Melt UI 디자인 시스템 컴포넌트 예제 ### 스토어와 액션 빌더의 전체 구성 createRadioGroup, createSlider, createSwitch는 일반 마크업에 기본 의미와 동작을 적용합니다. ```

TYPE COMPOSITION · LIVE STUDY

A small change. A different rhythm.

Use native Melt UI builders to change the alignment, tracking and guide visibility of an original typographic poster.

Composition

Text alignment

{#each ['left','center','right'] as value}{/each}

Letter spacing {$tracking[0]}px

{#each $thumbs as thumb}{/each}
0px8px

The grid is a visual aid. It does not change the poster’s text or spacing.

{saved||'This study changes only the local preview.'}

TYPE / 2026STUDY 04
SPACETOTHINK.

A pause between
one idea and the next.

Original type study
{$alignment} · {$tracking[0]}px
``` 코드 참조 - 슬라이더 값은 배열이며, 포스터에서는 첫 번째 항목을 읽습니다. - 코드에서는 명시적으로 속성을 펼치고 액션을 사용하므로, 별도로 명시되지 않은 전처리기를 가정하지 않습니다. - 빌더 스토어 값이 하나라도 바뀌면 저장된 상태는 만료됩니다. ### 완성된 오리지널 포스터 및 컨트롤 스타일 의미가 분명한 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 디자인 시스템 에이전트 설정 ### 구현 시작점 Svelte 5.57.1에서 사용하는 @melt-ui/svelte 0.86.6의 검증된 스토어/액션 API. 명시적 빌더 구문을 사용하므로 선택 사항인 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:
// npm run dev ``` ### 프로젝트를 위한 프롬프트 ``` 타이포그래피 구성 연구에는 Svelte 5와 함께 @melt-ui/svelte 0.86.6의 스토어/액션 빌더를 사용하세요. createRadioGroup, createSlider, createSwitch 요소에 속성과 액션을 모두 연결하고, 별도로 명시되지 않은 전처리기를 요구하지 않는 제공된 명시적 구문을 사용하세요. 슬라이더의 단일 요소 배열과 elements.thumbs 계약, 정렬 값, 그리드 표시 여부를 그대로 유지하세요. 포스터의 계산된 스타일을 이 스토어에 직접 연결하고, 변경 후에는 저장된 피드백을 무효화한 다음 left, [2], true로 초기화하세요. 최신 runes API나 예약 모델을 함께 사용하지 마세요. ``` ## Melt UI 디자인 시스템 출처 및 범위 Svelte 5.57.1의 @melt-ui/svelte 0.86.6 스토어/액션 빌더. 모든 시각적 토큰과 포스터 콘텐츠는 오리지널입니다. 저장 기능은 로컬 미리보기 상태만 기록하며 디자인을 내보내거나 게시하지 않습니다. - 사용법 빌더 속성, 액션, 상태 스토어. - 전처리기 왜 사용하나요: melt는 전처리와 이에 상응하는 명시적 구문을 필요로 합니다. - 라디오 그룹 단일 항목 선택 및 키보드 탐색. - 슬라이더 배열 값, 제한, 방향, 키. - 스위치 불리언 상태 및 의미. - 제어되는 상태 쓰기 가능한 스토어와 변경 함수. - 설치 버전이 지정된 패키지 설정. ## Melt UI 디자인 시스템 관련 자료 ### Naive UI 테마 객체의 값을 검증할 수 있는 네이티브 Naive UI 데이터 테이블 작업 화면입니다. 행 선택, 펼치기, 정렬, 페이지 이동 및 로컬 일괄 검토 기능을 제공합니다. ### Nuxt UI 실제 Vue 컴포넌트, 의미에 맞는 테마 참조, 입력 유효성 검사, 명확한 로컬 임시 저장 동작을 갖춘 완전한 Nuxt UI 4.11.3 브리프 작성기를 만드세요. ### 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) - [전처리기 왜 사용하나요: melt는 전처리와 이에 상응하는 명시적 구문을 필요로 합니다.](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)