Separator

Visual divider between content sections. Supports horizontal and vertical orientation.

Import

import { Separator } from "poyraz-ui/atoms";

Horizontal

Default horizontal separator.

Content above

Content below

<p>Content above</p>
<Separator />
<p>Content below</p>

Vertical

Use orientation='vertical' for side-by-side layouts.

Home

Docs

Blog

<div className="flex items-center gap-4 h-6">
  <span>Home</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Blog</span>
</div>

pnpm dlx shadcn@latest add @poyraz/separator

Runtime dependencies

@radix-ui/react-separator@^1.1.8

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/atoms/separator.tsx