Neumorphism UI
데이터와 피드백@neumorphism-ui/separator

Separator

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

@neumorphism-ui/separator
Registry JSON

미리보기

Neumorphism UI소스를 복사하고, 표면을 직접 만드세요.
미리보기설치API

설치

설치: separatornpx shadcn@latest add @neumorphism-ui/separator

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

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

Example

Separator 사용 코드
<div>
  <section>프로필 설정</section>
  <Separator className="my-6" />
  <section>알림 설정</section>
</div>

API 레퍼런스

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

접근성

  • 01

    단순 시각적 경계에는 기본 decorative=true를 유지합니다.

  • 02

    문서 구조상 의미 있는 경계라면 decorative=false를 사용해 role=separator를 노출합니다.

  • 03

    수직 separator는 부모가 높이를 제공하거나 className으로 명시적인 높이를 설정해야 합니다.