Separator

콘텐츠 사이를 구분하는 구분선 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add separator

사용법

TSX

import { Separator, SeparatorWithText } from "@msub-core/ui/components/separator"

function MyComponent() {
  return (
    <div>
      <p>위 콘텐츠</p>
      <Separator className="my-4" />
      <p>아래 콘텐츠</p>
    </div>
  )
}

수평 구분선

첫 번째 섹션

두 번째 섹션

세 번째 섹션

Prop	Type	Default	Required	Description
orientation	"horizontal" \| "vertical"	"horizontal"	No	구분선 방향
variant	"default" \| "muted" \| "strong"	"default"	No	구분선 스타일
decorative	boolean	true	No	장식용 여부 (접근성)

수직 구분선

항목 1

항목 2

항목 3

텍스트 포함

또는

스타일 변형

Default

Muted

Strong