Separator

The Separator component renders a thin line to visually divide content sections. Built on Radix UI Separator, it supports horizontal and vertical orientations with proper accessibility semantics.

Import

import { Separator } from '@nim-ui/components';

Basic Usage

<div className="space-y-4">
  <p>Content above the separator</p>
  <Separator />
  <p>Content below the separator</p>
</div>

Vertical

Use orientation="vertical" in a flex container.

<div className="flex h-5 items-center gap-4 text-sm">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

Props

Accessibility

• When decorative={true} (default): renders with role="none", ignored by screen readers
• When decorative={false}: renders with role="separator", announced to screen readers
• Proper aria-orientation attribute for vertical separators

Related Components

• Spacer — Flexible spacing element
• Stack — Stacked layout with consistent spacing