Separator

A visual divider that separates content into distinct sections.

$ npx @beaket/ui add separator

Section Title

Section description text.

Another Section

More content here.

Source

import { Separator } from "@/components/ui/separator";

const args = {};

const render = () => (
  <div className="max-w-sm">
    <div className="space-y-1">
      <h4 className="text-sm leading-none font-medium">Section Title</h4>
      <p className="text-fg-muted text-sm">Section description text.</p>
    </div>
    <Separator className="my-4" />
    <div className="space-y-1">
      <h4 className="text-sm leading-none font-medium">Another Section</h4>
      <p className="text-fg-muted text-sm">More content here.</p>
    </div>
  </div>
);

export default function Example() {
  return render();
}

Examples

All States

Horizontal (default)

Section A

Section B

Vertical

Home

About

Contact

In a card-like layout

Card Title

Card content goes here.

Source

import { Separator } from "@/components/ui/separator";

export default () => (
  <div className="space-y-8">
    <div>
      <h3 className="mb-4 text-sm font-medium">Horizontal (default)</h3>
      <div className="max-w-sm space-y-4">
        <p className="text-fg-muted text-sm">Section A</p>
        <Separator />
        <p className="text-fg-muted text-sm">Section B</p>
      </div>
    </div>

    <div>
      <h3 className="mb-4 text-sm font-medium">Vertical</h3>
      <div className="flex h-6 items-center gap-4">
        <span className="text-fg-muted text-sm">Home</span>
        <Separator orientation="vertical" />
        <span className="text-fg-muted text-sm">About</span>
        <Separator orientation="vertical" />
        <span className="text-fg-muted text-sm">Contact</span>
      </div>
    </div>

    <div>
      <h3 className="mb-4 text-sm font-medium">In a card-like layout</h3>
      <div className="border-border max-w-sm border p-4">
        <h4 className="font-medium">Card Title</h4>
        <Separator className="my-3" />
        <p className="text-fg-muted text-sm">Card content goes here.</p>
      </div>
    </div>
  </div>
);

Props

Name	Type	Default	Description
orientation	undefined \| horizontal \| vertical	horizontal	Layout direction of the rule
decorative	boolean \| undefined	true	Purely visual — hidden from assistive tech (the default)