Separator

Import

import { Separator } from "@retents/ui/separator"

Usage Guidelines

When to use

• To visually divide groups of related content, such as sections within a card or sidebar.
• As a horizontal rule between text blocks or list groups.
• As a vertical divider between inline items like navigation links or toolbar buttons.

When NOT to use

• For spacing alone — use margin or padding instead of an invisible separator.
• To separate entirely different page sections — use layout structure (cards, headings) instead.
• Inside dense lists where a border on each item is more appropriate.

Preview

Vertical separator

<div className="flex h-5 items-center gap-4">
  <span>Item 1</span>
  <Separator orientation="vertical" />
  <span>Item 2</span>
</div>

Source

Props