Separator

1. 목적과 출처

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

3. 속성 바꿔 보기

<div className="flex h-5 items-center gap-3">
  <span>제품팀</span>
  <Separator orientation="vertical" />
  <span>이슈</span>
</div>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/separator

import { Separator } from "@/components/ui/separator"

<Separator className="my-4" />

5. 바꿔도 되는 것과 유지할 토큰

6. 관련 패턴·템플릿

이 컴포넌트를 주로 쓰는 패턴입니다. 패턴 페이지에서 그 패턴을 쓰는 템플릿으로 이어집니다.