Separator

관련된 콘텐츠 영역이나 컨트롤 묶음 사이의 경계를 표시할 때 사용합니다.

미리보기

가로·세로 경계

문서 소개와 링크를 가로선으로 나누고 미리보기·설치·API 링크 사이에는 세로 구분선을 배치합니다.

컴포넌트 문서예제, 설치 방법, 속성 정보를 확인하세요.

미리보기

설치

API

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/separator

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

콘텐츠 그룹 사이에 배치하고 가로 또는 세로 방향을 선택하세요. 경계를 구분선으로 읽어 주어야 할 때만 decorative를 false로 설정합니다.

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

export default function Example() {
  return (
    <div>
      <p>Profile settings</p>
      <Separator className="my-4" />
      <p>Notification settings</p>
    </div>
  );
}

API 레퍼런스

수평과 수직 방향을 지원하며 기본값은 장식용입니다. 의미 있는 섹션 경계가 필요하면 decorative=false로 separator role과 aria-orientation을 활성화할 수 있습니다.

컴포넌트	속성	타입	기본값	설명
`Separator`	`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	구분선의 방향과 크기 스타일을 설정합니다.
`Separator`	`decorative`	`boolean`	`true`	true면 장식 요소로 숨기고 false면 role=separator를 사용합니다.
`Separator`	`className`	`string`	`—`	여백, 길이, 최소 높이를 확장합니다.

미리보기

가로·세로 경계

설치

사용법

API 레퍼런스

접근성