Components/Separator

Separator

콘텐츠를 시각적으로 구분하는 구분선 컴포넌트입니다.

Installation

bash
npx axis-cli add separator

Usage

AXIS Design System

AI/LLM 애플리케이션을 위한 컴포넌트 라이브러리

Docs
Components
Agentic UI
tsx
import { Separator } from '@ax/ui'

export function Example() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm font-medium">AXIS Design System</h4>
        <p className="text-sm text-muted-foreground">
          AI/LLM 애플리케이션을 위한 컴포넌트 라이브러리
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Components</div>
        <Separator orientation="vertical" />
        <div>Agentic UI</div>
      </div>
    </div>
  )
}

Orientation

Horizontal (Default)

Vertical

Item 1
Item 2
Item 3

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"구분선 방향
decorativebooleantrue장식용 여부 (접근성)
classNamestring-추가 CSS 클래스