Components
Separator
Radix 기반 수평·수직 분리선, CDS line 토큰 사용
사용
import { Separator } from "@tendtoyj/cds-ui/components/separator";
<Separator />
<Separator color="neutral" />
<Separator orientation="vertical" />
<Separator thickness={2} />Horizontal
Separator — Horizontal
thickness 1 / color normal
color neutral
color alternative
alpha-normal (투명 기반)
thickness 2
Vertical
Separator — Vertical
DocsComponentsTokensChangelog
Props
| Prop | 타입 | 기본 | 설명 |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Radix Separator.Root 의 orientation |
color | "normal" | "neutral" | "alternative" | "alpha-normal" | "alpha-neutral" | "alpha-alternative" | "normal" | solid 는 --cds-line-solid-*, alpha 는 --cds-line-normal-* |
thickness | 1 | 2 | 1 | 선 두께(px). 2 는 h-0.5 / w-0.5 로 매핑 |
decorative | boolean | true | Radix decorative prop. 의미 없는 분리선일 때 true |
Registry 설치
npx shadcn add https://cds.codexy.com/r/separator