primitives

Separator

Hairline divider between sections. Horizontal by default; supports vertical orientation for inline groupings.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/separator.json

Or import from the workspace package:

import { Separator } from "@8maverik8/design";

Above

Below

<div className="flex flex-col gap-3">
  <p>Above</p>
  <Separator />
  <p>Below</p>
</div>

Left

Right

<div className="flex h-5 items-center gap-3">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

horizontal(default)1px row across the parent's full width.
vertical1px column across the parent's full height — needs an explicit height in the parent.

Set `decorative={false}` only when the divider carries semantic meaning (e.g. between two articles).By default it's purely visual — Radix hides it from screen readers, which is usually correct.
Use a Separator to add vertical breathing room between two sections.Use margin / gap. A Separator is a visible line, not a spacer.