Visually or semantically separates content with a themed one-pixel rule.

Renders a <hr> by default — semantically correct for horizontal dividers and natively understood by assistive technology. For vertical separators inside flex containers, set orientation="vertical".

Matches the shadcn/ui Separator API: decorative by default, with an opt-in semantic mode for separators that carry document structure.

Examples

# Horizontal separator (decorative by default)
<.separator />

# Vertical separator — needs a container with an explicit height
<div class="flex h-5 items-center gap-4">
  <span>Blog</span>
  <.separator orientation="vertical" />
  <span>Docs</span>
</div>

# Semantic separator (carries document structure)
<.separator decorative={false} aria-label="End of account section" />

# "Or" divider between two separators
<div class="flex items-center gap-4">
  <.separator class="flex-1" />
  <span class="text-xs text-muted-foreground">OR</span>
  <.separator class="flex-1" />
</div>

Attributes

• orientation - Direction. One of horizontal, vertical. Defaults to horizontal.
• decorative - When true (default), the separator is hidden from assistive technology via role="presentation" and aria-hidden. Set to false when the separator carries structural meaning.
• class - Additional CSS classes.
• id - Optional unique identifier.

Accessibility

• Decorative by default (role="presentation", aria-hidden="true") — matches shadcn/ui so screen readers don't announce purely visual rules.
• Set decorative={false} when the separator represents a real thematic break in the document; it then exposes role="separator" and aria-orientation.
• Vertical separators that are semantic also set aria-orientation="vertical".