세퍼레이터

세퍼레이터 (Separator)

콘텐츠를 시각적으로 또는 의미적으로 구분해 주는 컴포넌트예요. 섹션과 섹션 사이에 얇은 구분선을 넣거나, 접근성 관점에서 내용을 나누는 역할을 할 때 사용해요. 단순하지만 레이아웃을 정돈하는 데 유용하죠.

출처: 문서

CLI Manual

npx shadcn@latest add separator

다음 의존성을 설치해 주세요.

npm install @radix-ui/react-separator

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

컴포넌트를 import 하고,

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

원하는 위치에 <Separator />를 넣어 주면 구분선이 렌더링돼요.

<Separator />