컴포넌트
Color Picker Mini
원형 컬러 스와치가 격자로 배열된 미니 팔레트 피커로, 선택 시 링이 부드럽게 이동하고 현재 색상의 HEX 코드와 미리보기 칩을 함께 보여준다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/ColorPickerMini-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| swatches | readonly string[] | 12-color brand palette | List of HEX color swatches to display; falls back to the built-in palette when empty. |
| defaultValue | string | first swatch | Initial selected HEX color in uncontrolled mode. |
| columns | number | 6 | Number of swatches per row in the grid. |
| swatchSize | number | 26 | Diameter of each circular swatch in pixels. |
| showValue | boolean | true | Whether to show the selected color's HEX code and preview chip below the grid. |
| onChange | (value: string) => void | undefined | Callback fired with the HEX string when the selected color changes. |