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

Horizontal Separator

Content above the separator

Content below the separator

View Code

<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.

Vertical Separator

Blog

Docs

Source

View Code

<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

Name	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Direction of the separator line
decorative	boolean	true	When true, renders as role="none" (purely visual)
className	string	-	Additional CSS classes

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