Separator

콘텐츠를 시각적으로 구분하는 구분선

Horizontal

기본적인 가로 구분선입니다.

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

tsx

<div>
  <div className="space-y-1">
    <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
    <p className="text-sm text-muted-foreground">
      An open-source UI component library.
    </p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center space-x-4 text-sm">
    <div>Blog</div>
    <Separator orientation="vertical" />
    <div>Docs</div>
    <Separator orientation="vertical" />
    <div>Source</div>
  </div>
</div>

Vertical

세로 구분선은 인라인 요소 사이에서 사용합니다.

Home

Products

About

Contact

tsx

<div className="flex h-5 items-center space-x-4 text-sm">
  <div>Home</div>
  <Separator orientation="vertical" />
  <div>Products</div>
  <Separator orientation="vertical" />
  <div>About</div>
  <Separator orientation="vertical" />
  <div>Contact</div>
</div>

Usage

tsx

import { Separator } from '@gpters-internal/ui';

function Example() {
  return (
    <div>
      <p>Content above</p>
      <Separator className="my-4" />
      <p>Content below</p>
    </div>
  );
}