# HeroUI 디자인 시스템

## HeroUI 디자인 시스템 인터페이스 미리보기

기본 슬라이더로 품질을 변경하고, 메타데이터를 전환하고, 테마를 바꾸고, 로컬 레시피를 적용해 보세요. 인코딩이나 업로드를 시뮬레이션하지 않습니다.

## HeroUI 디자인 시스템 디자인 참고 자료

HeroUI 3.2.6 기본 테마를 @heroui/styles/dist/themes/default/variables.css와 대조해 확인했습니다. 아래 OKLCH 값은 패키지에 지정된 값 그대로입니다. 아트워크 색상과 타이포그래피는 애플리케이션에서 선택한 것으로, HeroUI 브랜드 토큰이 아닙니다.

### 시맨틱 표면과 대비

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --background | oklch(0.9702 0 0) | 밝은 테마의 페이지 캔버스입니다. 어두운 테마에서는 oklch(12% 0.005 285.823)로 바뀝니다. |
| --foreground | var(--eclipse) | 밝은 테마의 본문 색상입니다. 어두운 테마에서는 --snow로 설정됩니다. |
| --surface | var(--white) | 밝은 테마의 카드 배경입니다. 어두운 테마에서는 oklch(0.2103 0.0059 285.89)입니다. |
| --overlay | var(--white) | 떠 있는 레이어의 배경입니다. 밝은 테마에서 값이 같더라도 표면과 역할이 구분됩니다. |
| --accent | oklch(0.6204 0.195 253.83) | 선택된 스위치, 슬라이더 채움 영역, 기본 버튼에 사용됩니다. |
| --accent-foreground | var(--snow) | 단색 강조색 위에 표시되는 텍스트입니다. |
| --muted | oklch(0.5517 0.0138 285.94) | 보조 텍스트입니다. 어두운 테마에서는 oklch(70.5% 0.015 286.067)입니다. |
| --border | oklch(90% 0.004 286.32) | 밝은 테마의 경계선입니다. 어두운 테마에서는 oklch(28% 0.006 286.033)입니다. |
| --focus | var(--accent) | 키보드 포커스를 표시합니다. |
| --field-background | var(--white) | 밝은 테마의 입력 표면입니다. 어두운 테마에서는 이클립스 값에 맞춰집니다. |
### 모양, 간격, 상태

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| --spacing | 0.25rem | 기본 간격 단위입니다. 루트 크기 16px 기준 4px입니다. |
| --radius | 0.5rem | 기본 반경 프리미티브입니다. 루트 크기 16px 기준 8px입니다. |
| --field-radius | calc(var(--radius) * 1.5) | 기본 필드 반경은 12px입니다. |
| --border-width | 1px | 기본 경계선 두께입니다. |
| --field-border-width | 0px | 기본 필드에는 외곽선 테두리를 사용하지 않습니다. |
| --disabled-opacity | 0.5 | 비활성화 상태를 시각적으로 나타냅니다. 컴포넌트에는 여전히 isDisabled를 사용하세요. |
| --ring-offset-width | 2px | 컨트롤과 포커스 링 사이의 간격입니다. |
| --tooltip-delay | 1500ms | 기본 패키지의 초기 툴팁 지연 시간입니다. |
| --tooltip-close-delay | 500ms | 툴팁이 닫히기까지의 지연 시간입니다. |
### 애플리케이션 타이포그래피 및 레이아웃

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| body | 16px / 1.5, Arial, Helvetica, sans-serif | 미리보기에 사용할 글꼴을 명시적으로 선택했습니다. HeroUI에서 필수로 지정한 글꼴은 아닙니다. |
| h1 | 32px / 1.15; 28px below 700px | 원본 페이지 제목의 크기 체계입니다. |
| h2 | 24px / 1.25 | 내보내기 설정 제목입니다. |
| helper text | 13px / inherited 1.5 | 품질 설명과 로컬 결과입니다. |
| desktop gap | 24px | 아트워크와 설정을 두 열로 배치한 그리드입니다. |
| mobile breakpoint | 700px | 원본 반응형 규칙이며, HeroUI 중단점 토큰이 아닙니다. |
| card radius | calc(var(--radius) * 3) | 공식 프리미티브를 사용한 24px 애플리케이션 구성입니다. |
### 기본 컨트롤 설정

| 이름 / 규칙 | 값 / 구성 | 용도 |
| --- | --- | --- |
| quality range | minValue=10; maxValue=100; step=5 | 애플리케이션 인코더 레시피의 범위이며, HeroUI 기본값이 아닙니다. |
| Slider | value + onChange | 제어되는 숫자 값에 따라 출력과 레시피가 업데이트됩니다. |
| Switch | isSelected + onChange | 제어되는 불리언 값으로 단일 진실 공급원을 유지합니다. |
| Button | onPress | React Aria의 press 이벤트는 포인터와 키보드 활성화를 지원합니다. |
## HeroUI 디자인 시스템 완벽 가이드

실제 인터페이스를 위해 이 시스템을 선택하고 적용하고 검토하는 실용 가이드.

완전한 안내와 구현 시작점, 소스 링크.

## HeroUI 디자인 시스템 v3와 Export Studio

### React 컴포넌트와 시맨틱 스타일시트

> 이 예제는 HeroUI 3.2.6을 대상으로 합니다. 컨트롤은 React 컴포넌트이며 React Aria 동작을 기반으로 하고, 시각적 계층은 @heroui/styles에서 제공합니다. 공식 빠른 시작 가이드에서는 React 19와 Tailwind CSS v4를 요구합니다. v3 설정에서는 이 애플리케이션을 이전 방식의 HeroUIProvider 패턴으로 감싸지 않습니다. v2 튜토리얼을 이 컴파운드 컴포넌트 API와 함께 사용하면 컨트롤이 누락되거나 스타일이 잘못 적용될 수 있습니다.

이 예제는 내보내기 레시피 편집기입니다. 왼쪽에는 아트워크가, 오른쪽에는 품질 및 메타데이터 컨트롤이 있습니다. 일러스트레이션은 원본 CSS으로 그렸으며, 라이브러리에서 처리한 이미지가 아닙니다. 레시피를 적용하면 선택한 설정이 로컬 React 상태에 저장됩니다. 파일 크기나 다운로드 결과를 임의로 만들어내지 않습니다.

지원 사양 읽기

## HeroUI 디자인 시스템 시맨틱 색상과 테마

### 캔버스, 표면, 떠 있는 레이어를 구분하세요

바깥쪽 캔버스에는 --background를, 아트워크와 설정 카드에는 --surface를, 향후 추가할 팝오버나 대화상자에는 --overlay를 사용하세요. 밝은 테마에서 두 값이 흰색으로 같아지더라도 각각 시맨틱 역할이 다릅니다. 어두운 테마에서는 캔버스와 높이가 있는 표면의 색이 서로 달라집니다. 이 예제에서는 document.documentElement에 dark 클래스를 전환해 모든 하위 요소에 동일한 테마 범위를 적용합니다.

슬라이더 채움 영역과 선택된 스위치에는 강조색 역할을 사용합니다. 단색 강조색 컨트롤에는 --accent-foreground를 함께 적용합니다. 카드 전체의 불투명도를 낮추지 않고 보조 텍스트에 --muted를 사용합니다. 아트워크는 인터랙티브한 크롬이 아닌 콘텐츠이므로 두 테마 모두 독립적인 따뜻한 색상 팔레트를 유지합니다.

지원 사양 읽기

## HeroUI 디자인 시스템 타이포그래피와 간격

### 애플리케이션의 크기 체계를 명시하세요

HeroUI 스타일은 Tailwind 유틸리티와 연동되지만, 이 페이지에서 특정 HeroUI 서체를 필수로 지정하지는 않습니다. 원본 CSS에서는 본문에 Arial/Helvetica를 사용하고 글자 크기는 16px, 행간은 1.5로 설정했습니다. 좁은 화면에서는 32px 제목이 28px로 줄어들고, 설정 제목은 24px입니다. 참고 표에는 이러한 애플리케이션 값과 패키지 변수가 구분되어 있습니다.

공식 --spacing 프리미티브는 0.25rem입니다. 이 구성에서는 레시피 내부에 16px, 열 사이와 데스크톱 카드 주위에 24px, 데스크톱 캔버스 주위에 32px를 사용합니다. 필드 반경은 공식 8px 반경 프리미티브에서 가져옵니다. 카드 반경은 이 프리미티브의 세 배를 사용하므로, 24px는 애플리케이션에서 파생한 값이지 기본 Card 값이라고 주장하는 값이 아닙니다.

지원 사양 읽기

## HeroUI 디자인 시스템: 완전한 슬라이더 만들기

### 구성과 값의 관리를 한곳에 모으세요

루트 Slider가 value, onChange, minValue, maxValue, step을 관리합니다. Label은 접근 가능한 이름을 제공합니다. Slider.Output은 동일한 값을 표시하고, Slider.Track에는 Slider.Fill과 Slider.Thumb이 포함됩니다. 화면에 표시되는 요소를 생략하면 동작은 하더라도 예상한 트랙이나 핸들이 나타나지 않을 수 있습니다. 이 예제에서는 범위 배열 대신 숫자 하나를 사용합니다.

품질은 10~100 범위에서 5씩 증가하도록 제한됩니다. 이 제한은 제품에 따라 정한 값입니다. HeroUI의 기본 범위는 0~100이며 단계는 1입니다. 품질 값과 바이트 수 사이에는 보편적으로 신뢰할 수 있는 관계가 없으므로, 파일 크기를 추정해 제시하지 않고 설명 문구로 절충점을 안내합니다. 여러 개의 썸을 지원하려면 숫자 배열을 사용하고 각 썸에 올바른 인덱스를 지정하세요.

1. 품질 슬라이더에 포커스를 두고 화살표 키를 눌러 한 단계씩 변경하세요.

2. 화면에 표시되는 출력과 현재 레시피가 함께 변경되는지 확인하세요.

3. 레시피를 적용한 다음 슬라이더를 다시 움직여 초안과 적용된 스냅샷을 구분해 보세요.

지원 사양 읽기

## HeroUI 디자인 시스템: 불리언 설정 구성하기

### 스위치는 컨트롤과 콘텐츠 요소로 구성됩니다.

메타데이터 설정은 Switch의 isSelected와 onChange를 사용합니다. 설치된 3.2.6 구현에서 Switch.Content는 Switch.Control과 Label을 감싸고, Switch.Control에는 Switch.Thumb가 들어 있습니다. Description은 필드 수준의 도움말로 Switch.Content 옆에 배치됩니다. 이는 일부 이전 v3 문서 예제와 다른 SwitchField/SwitchButton 구조를 사용하는 설치된 소스에 맞춘 구성입니다. 설명은 파란색 선택 트랙에만 의존하지 않고 불리언 값의 의미를 알려 줍니다. 하나의 메타데이터 상태가 네이티브 컨트롤과 텍스트 레시피를 모두 제어합니다.

이 불리언 값은 적용 작업과 분리해 두세요. 메타데이터를 전환하면 현재 초안이 즉시 수정되고, 미리 보기에 적용을 누르면 스냅샷이 저장됩니다. 재설정하면 품질이 80으로 복원되고 메타데이터가 제거되며 스냅샷도 지워집니다. 다른 초안에 기존 저장 상태 표시를 재사용하지 마세요. 인코더와 연결한다면 모호한 폼 텍스트를 읽는 대신 적용된 객체를 해당 프로세스에 전달하세요.

지원 사양 읽기

## HeroUI 디자인 시스템: 반응형으로 화면 표면 구성하기

### 아트워크는 콘텐츠이며, 컨트롤 뒤에 놓는 장식이 아닙니다.

데스크톱에서는 1.05fr/1fr 그리드를 사용해 아트워크에 조금 더 넓은 공간을 주면서 설정도 읽기 쉽게 유지합니다. 기존 700px 브레이크포인트에서는 그리드가 단일 열로 바뀌고 헤더가 세로로 쌓이며 아트워크의 종횡비가 4:5에서 4:3으로 변경됩니다. 읽기 영역을 안정적으로 유지하기 위해 캡션은 아트워크 바깥에 둡니다.

모든 인터랙티브 컨트롤은 불투명한 시맨틱 표면 위에 배치합니다. 공간이 부족하면 버튼이 줄 바꿈됩니다. 미리 보기 높이는 콘텐츠에 따라 결정되며 뷰포트의 최소 높이를 사용하지 않습니다. 이는 문서가 자동 크기 조정 iframe에 삽입될 때 중요합니다. 폼이나 결과를 가리는 고정 높이 스크롤 상자는 사용하지 않습니다.

지원 사양 읽기

## HeroUI 디자인 시스템: 인터랙션, 포커스, 실제 결과

### 그려서 흉내 내지 말고 네이티브 상태를 사용하세요.

Button은 사용자 지정 포인터 전용 이벤트 대신 onPress를 사용합니다. Slider는 키보드 조작과 값 알림을 제공합니다. Switch는 네이티브 접근성 구현을 통해 불리언 상태를 전달합니다. 사용자 지정 레이아웃 CSS을 적용해도 포커스 스타일은 유지됩니다. 컴포넌트를 비활성화할 때는 opacity만 적용하지 말고 isDisabled를 사용하세요. --disabled-opacity는 외관만 설명하는 변수입니다.

상태 문단에는 role=status를 적용해 키보드 포커스를 이동하지 않고도 적용된 스냅샷을 알릴 수 있습니다. 어두운 테마 전환 버튼은 다음에 수행할 동작을 나타내도록 레이블이 바뀝니다. 아트워크에는 설명이 포함된 영역 레이블이 있고, 그 안의 도형은 장식용으로 처리됩니다. 이 데모는 새로고침 후에도 데이터가 유지된다고 약속하지 않습니다.

- 품질은 표시되는 결과값이 있는 제한된 숫자 선택 항목입니다.

- 메타데이터는 레이블과 설명이 함께 제공되는 불리언 항목입니다.

- 적용은 로컬 스냅샷을 저장하고, 재설정은 스냅샷을 지운 뒤 초기 초안을 복원합니다.

지원 사양 읽기

## HeroUI 디자인 시스템: 예제 설치 및 재현

### 스타일시트 파이프라인 하나를 선택하세요.

Vite React 애플리케이션에서 고정된 HeroUI 패키지와 Vite 플러그인으로 Tailwind CSS v4를 설치합니다. 기본 스타일시트에서 먼저 tailwindcss를 가져오고 다음으로 @heroui/styles를 가져온 뒤 기존 레이아웃 CSS을 포함합니다. React createRoot로 App을 렌더링합니다. 이 구성에는 v2 provider가 필요하지 않습니다. 설정 블록에서 엔트리와 Vite 구성을 확인할 수 있으며, 전체 App과 CSS은 위에 제공되어 있습니다.

다운로드 가능한 독립 실행형 예제는 패키지의 사전 컴파일된 heroui.min.css와 esbuild React 번들을 인라인으로 포함합니다. 따라서 미리 보기에 CDN이 필요하지 않습니다. 동일한 네이티브 컨트롤을 보여 주지만, 사전 컴파일된 스타일과 Tailwind 생성 HeroUI 스타일을 하나의 프로덕션 앱에 모두 가져오라는 의미는 아닙니다. 규칙 중복을 피하려면 파이프라인 하나만 선택하세요.

지원 사양 읽기

## HeroUI 디자인 시스템: 인코더 기능을 추가하지 않고 레시피 확장하기

### 기능의 경계를 명확히 드러내세요.

실제 이미지 변환 기능을 추가하려면 파일 입력과 실제 브라우저 또는 서버 인코더를 도입한 다음, 대기·실패·완료 상태를 해당 작업에 연결하세요. Slider는 값을 선택할 뿐 압축 기능을 제공하지 않습니다. 실제 출력 blob이 생기기 전까지는 적용 버튼을 다운로드 버튼으로 바꾸지 마세요. 원본 이미지는 별도로 보존해 레시피를 반복해서 변경해도 손실 압축이 누적되지 않도록 하세요.

애플리케이션에 테마를 적용할 때는 시맨틱 색상 쌍을 함께 재정의하고 밝은 테마와 어두운 테마를 모두 테스트하세요. 적합하지 않은 전경색은 그대로 둔 채 --accent만 변경하면 버튼 대비가 나빠질 수 있습니다. 더 세밀하게 사용자 지정하려면 컴포넌트의 접근성 있는 입력을 겉모양만 비슷한 div로 바꾸지 말고, 문서화된 컴포넌트 클래스와 데이터 상태를 대상으로 하세요.

지원 사양 읽기

## HeroUI 디자인 시스템 컴포넌트 예제

### 완성된 내보내기 레시피 애플리케이션

Slider와 Switch의 복합 파트는 공식 스타일을 상속합니다. 별도의 적용 스냅샷으로 초안 상태와 적용 상태를 구분합니다.

```
import React,{useState,useEffect} from 'react';
import {Button,Switch,Label,Description,Slider} from '@heroui/react';
import './style.css';
export default function App(){
const[quality,setQuality]=useState(80),[metadata,setMetadata]=useState(false),[dark,setDark]=useState(false),[saved,setSaved]=useState(null);
useEffect(()=>{document.documentElement.classList.toggle('dark',dark)},[dark]);
return <main className='export-app'><header><div><p className='eyebrow'>HeroUI · Export studio</p><h1>Make room for the image.</h1><p className='muted'>Inspect a local export recipe before handing it to an encoder.</p></div><Button variant='secondary' onPress={()=>setDark(!dark)}>{dark?'Light appearance':'Dark appearance'}</Button></header><div className='export-grid'><section className='art-panel' aria-label='Original CSS artwork preview'><div className='art'><div className='sun'/><div className='hill one'/><div className='hill two'/><span>FIELD NOTES<br/>COLLECTION 07</span></div><div className='art-caption'><strong>Morning in the dunes</strong><span>1600 × 1200 · sample composition</span></div></section><section className='settings'><p className='eyebrow'>WEBP PRESET</p><h2>Export settings</h2><p className='muted'>The controls update a recipe. They do not encode or upload an image.</p><Slider value={quality} onChange={setQuality} minValue={10} maxValue={100} step={5}><div className='slider-heading'><Label>Image quality</Label><Slider.Output/></div><Slider.Track><Slider.Fill/><Slider.Thumb/></Slider.Track></Slider><p className='helper'>Higher quality may preserve fine texture. File size depends on the source image and encoder.</p><Switch isSelected={metadata} onChange={setMetadata}><Switch.Content><Switch.Control><Switch.Thumb/></Switch.Control><Label>Keep metadata</Label></Switch.Content><Description>Include source metadata in the recipe.</Description></Switch><div className='recipe'><p className='eyebrow'>CURRENT RECIPE</p><code>format: webp<br/>quality: {quality}<br/>metadata: {metadata?'keep':'strip'}</code></div><div className='actions'><Button onPress={()=>setSaved({quality,metadata})}>Apply to preview</Button><Button variant='tertiary' onPress={()=>{setQuality(80);setMetadata(false);setSaved(null)}}>Reset</Button></div><p role='status' className='status'>{saved?`Preview recipe applied: quality ${saved.quality}, metadata ${saved.metadata?'kept':'stripped'}. No file was generated.`:'Adjust quality with the arrow keys, then apply the recipe.'}</p></section></div><footer>Native HeroUI 3.2.6 controls and official compiled styles. Artwork and page layout are original CSS.</footer></main>;
}
```

코드 참조

- Slider.Output에는 제어 중인 숫자가 표시됩니다.

- Switch.Control과 Switch.Thumb는 화면에 표시되는 필수 구조입니다.

- onPress는 레시피를 적용할 뿐, 이미지가 인코딩되었다고 알리지 않습니다.

### 기존 레이아웃 CSS

표면과 모서리 반경은 HeroUI 변수를 참조하며, 아트워크 색상과 글꼴 크기, 브레이크포인트는 애플리케이션에서 명시적으로 결정합니다.

```
*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}.export-app{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:28px}h1{font-size:32px;font-weight:700;letter-spacing:-.035em;line-height:1.15;margin:8px 0 12px}h2{font-size:24px;font-weight:650;line-height:1.25;margin:8px 0 12px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700}.muted,.helper,footer{color:var(--muted)}.muted{margin:0 0 24px}.export-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:24px}.art-panel,.settings{background:var(--surface);border-radius:calc(var(--radius)*3);padding:24px;box-shadow:var(--surface-shadow)}.art{position:relative;aspect-ratio:4/5;background:#f0d8b8;border-radius:calc(var(--radius)*2);overflow:hidden}.sun{width:40%;aspect-ratio:1;background:#bf532f;position:absolute;top:13%;left:30%;border-radius:50%}.hill{position:absolute;width:180%;height:70%;border-radius:50%;transform:rotate(-24deg)}.one{top:50%;left:-60%;background:#c59162}.two{top:66%;left:-10%;background:#69402e}.art span{position:absolute;top:6%;left:8%;font-size:11px;letter-spacing:.2em;color:#563324}.art-caption{display:flex;flex-direction:column;gap:4px;margin-top:16px}.art-caption span{color:var(--muted);font-size:12px}.settings{display:flex;flex-direction:column;gap:16px}.settings .muted{margin-bottom:0}.slider-heading{display:flex;justify-content:space-between;gap:16px}.helper{font-size:13px;margin:0}.recipe{border:var(--border-width) solid var(--border);padding:16px;border-radius:var(--field-radius)}.recipe .eyebrow{margin-top:0}code{font-size:14px}.actions{display:flex;flex-wrap:wrap;gap:8px}.status{font-size:13px;margin:0}footer{font-size:12px;margin-top:20px}@media(max-width:700px){.export-app{padding:16px}header{flex-direction:column}h1{font-size:28px}.export-grid{grid-template-columns:1fr}.art{aspect-ratio:4/3}.art-panel,.settings{padding:20px}}
```

코드 참조

- 공식 스타일시트 다음에 이 CSS을 불러오세요.

- html의 dark 클래스는 문서 전체의 시맨틱 값을 변경합니다.

## HeroUI 디자인 시스템 에이전트 설정

### 구현 시작점

React 19 및 HeroUI 3.2.6으로 네이티브 미리 보기를 검증했습니다. 제공된 App과 레이아웃 CSS은 완성되어 있습니다. 이 Vite 구성은 문서화된 Tailwind v4 가져오기 파이프라인을 사용하며, 오프라인 예제에는 공식 사전 컴파일 스타일시트가 인라인으로 포함되어 있습니다.

```
// In a Vite React 19 project:
// npm install @heroui/react@3.2.6 @heroui/styles@3.2.6 tailwindcss@^4 @tailwindcss/vite@^4
// vite.config.js
import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({plugins:[react(),tailwindcss()]});

// globals.css: keep this import order
// @import "tailwindcss";
// @import "@heroui/styles";
// Paste the Original layout CSS after these imports.

// main.jsx
import React from 'react';
import {createRoot} from 'react-dom/client';
import './globals.css';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App/>);
// App.jsx is the complete application above. Remove its './style.css'
// import when the same CSS is included in globals.css.
```

### 프로젝트를 위한 프롬프트

```
제공된 HeroUI 3.2.6 App.jsx, 스타일시트, Tailwind 통합을 사용해 이미지 내보내기 스튜디오를 만드세요. Slider의 품질 상태와 Switch의 메타데이터 상태를 내보내기 요약에 연결하고, Switch.Content, Control, Thumb와 해당 레이블을 유지하세요. 품질이나 메타데이터가 바뀌면 저장된 스냅샷을 무효화해야 합니다. 어두운 테마 전환 컨트롤은 스타일시트에서 사용하는 동일한 문서 클래스를 변경해야 합니다. 내보내기 레시피는 로컬에 명시적으로 저장하세요. 이미지 파일이 처리되거나 다운로드되었다고 암시하지 마세요.
```

## HeroUI 디자인 시스템 출처 및 범위

HeroUI 3.2.6 참조. 공식 변수와 독자적인 타이포그래피, 아트워크, 레이아웃을 구분합니다. 기본 미리보기에서는 메모리에 저장된 설정만 변경하며 이미지를 인코딩하지 않습니다.

- 빠른 시작 React 및 Tailwind 요구사항과 가져오기 순서.

- 색상 시맨틱 색상 역할.

- 테마 설정 CSS 테마 사용자 지정.

- 슬라이더 복합 구성 요소의 구조와 제어되는 숫자 값.

- 스위치 불리언 구성과 상태.

- 스타일링 컴포넌트 스타일링 접근 방식.

## HeroUI 디자인 시스템 관련 자료

### Ionic Framework

색상 역할, iOS 및 Material 슬라이더 범위의 기하 구조, 실제 세그먼트 및 스위치 동작이 검증된 네이티브 Ionic 읽기 설정 인터페이스입니다. 글꼴, 크기, 종이 설정에 따라 기사 표시도 달라집니다.

### Kobalte

Kobalte는 Solid용 헤드리스 컴포넌트를 제공합니다. 여기에는 입력값과 서식이 적용된 값이 분리된 숫자 필드, 구조가 명확한 복합 체크박스, 눌림 상태를 지원하는 버튼이 포함됩니다. 이 가이드에서는 파생 수량과 초기화 가능한 재료 선택 항목을 갖춘 레시피 배율 조정기를 통해 이러한 기본 요소를 Solid 시그널과 연결합니다.

### Mantine

기본 참가자 표와 일정 관리 드로어를 중심으로 구성한 Mantine 9 참조입니다. 실제 테마 스케일을 살펴보고, useForm을 TextInput, Select, Checkbox, DatePickerInput에 연결한 뒤 로컬 레코드를 추가하기 전에 유효성 검사를 시험해 보세요.


- [구현 레퍼런스](https://heroui.com/en/docs/react/components/slider)
- [출처](https://heroui.com/en/docs/react/handbook/colors)
- [출처](https://heroui.com/en/docs/react/handbook/theming)
- [출처](https://heroui.com/en/docs/react/handbook/styling)
- [출처](https://heroui.com/en/docs/react/components/slider)
- [지원 사양 읽기](https://heroui.com/en/docs/react/getting-started/quick-start)
- [지원 사양 읽기](https://heroui.com/en/docs/react/handbook/colors)
- [지원 사양 읽기](https://heroui.com/en/docs/react/handbook/theming)
- [지원 사양 읽기](https://heroui.com/en/docs/react/components/slider)
- [지원 사양 읽기](https://heroui.com/en/docs/react/components/switch)
- [지원 사양 읽기](https://heroui.com/en/docs/react/handbook/styling)
- [코드 참조](https://heroui.com/en/docs/react/components/slider)
- [코드 참조](https://heroui.com/en/docs/react/handbook/styling)
- [빠른 시작 React 및 Tailwind 요구사항과 가져오기 순서.](https://heroui.com/en/docs/react/getting-started/quick-start)
- [색상 시맨틱 색상 역할.](https://heroui.com/en/docs/react/handbook/colors)
- [테마 설정 CSS 테마 사용자 지정.](https://heroui.com/en/docs/react/handbook/theming)
- [슬라이더 복합 구성 요소의 구조와 제어되는 숫자 값.](https://heroui.com/en/docs/react/components/slider)
- [스위치 불리언 구성과 상태.](https://heroui.com/en/docs/react/components/switch)
- [스타일링 컴포넌트 스타일링 접근 방식.](https://heroui.com/en/docs/react/handbook/styling)