Separator

A visual or semantic divider between content sections, built on Radix UI Separator with support for horizontal and vertical orientations.

Installation

npm install @designforge/ui

Usage

import { Separator, separatorVariants } from "@designforge/ui";

Examples

Horizontal Separator (Default)

The default orientation divides vertically stacked content sections.

import { Separator } from "@designforge/ui";
 
export default function HorizontalExample() {
  return (
    <div className="space-y-4">
      <p className="text-sm text-muted-foreground">Section A content goes here.</p>
      <Separator />
      <p className="text-sm text-muted-foreground">Section B content goes here.</p>
    </div>
  );
}

Vertical Separator

Use orientation="vertical" inside a flex row to divide items placed side by side.

import { Separator } from "@designforge/ui";
 
export default function VerticalExample() {
  return (
    <div className="flex items-center gap-4 h-8">
      <span className="text-sm">Home</span>
      <Separator orientation="vertical" />
      <span className="text-sm">About</span>
      <Separator orientation="vertical" />
      <span className="text-sm">Contact</span>
    </div>
  );
}

Decorative vs Semantic

When decorative={false}, the separator is announced by screen readers as a structural landmark via role="separator". Use this when the divider communicates meaningful document structure.

import { Separator } from "@designforge/ui";
 
export default function DecorativeVsSemantic() {
  return (
    <div className="space-y-6">
      {/* Decorative — role="none", invisible to assistive technology */}
      <div className="space-y-2">
        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
          Decorative (default)
        </p>
        <Separator decorative={true} />
      </div>
 
      {/* Semantic — role="separator", announced by screen readers */}
      <div className="space-y-2">
        <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
          Semantic
        </p>
        <Separator decorative={false} />
      </div>
    </div>
  );
}

Navigation Sidebar

Separators are ideal for grouping navigation sections inside a sidebar.

import { Separator } from "@designforge/ui";
 
export default function NavSidebar() {
  return (
    <nav className="w-56 p-4 space-y-1 border rounded-lg">
      <a href="#" className="block px-3 py-2 rounded-md text-sm hover:bg-muted">
        Dashboard
      </a>
      <a href="#" className="block px-3 py-2 rounded-md text-sm hover:bg-muted">
        Analytics
      </a>
 
      <Separator decorative={false} className="my-2" />
 
      <p className="px-3 py-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
        Settings
      </p>
      <a href="#" className="block px-3 py-2 rounded-md text-sm hover:bg-muted">
        Profile
      </a>
      <a href="#" className="block px-3 py-2 rounded-md text-sm hover:bg-muted">
        Billing
      </a>
 
      <Separator decorative={false} className="my-2" />
 
      <a href="#" className="block px-3 py-2 rounded-md text-sm hover:bg-muted text-destructive">
        Sign out
      </a>
    </nav>
  );
}

Section Dividers in a Card

Use separators to divide a card into distinct zones — header, body, and footer.

import { Separator } from "@designforge/ui";
 
export default function CardWithDividers() {
  return (
    <div className="w-80 border rounded-xl overflow-hidden shadow-sm">
      <div className="px-5 py-4">
        <h3 className="font-semibold text-base">Order Summary</h3>
        <p className="text-sm text-muted-foreground mt-0.5">3 items in your cart</p>
      </div>
 
      <Separator />
 
      <div className="px-5 py-4 space-y-3">
        <div className="flex justify-between text-sm">
          <span>Subtotal</span>
          <span>$120.00</span>
        </div>
        <div className="flex justify-between text-sm">
          <span>Shipping</span>
          <span>$5.00</span>
        </div>
        <div className="flex justify-between text-sm text-muted-foreground">
          <span>Discount</span>
          <span>-$10.00</span>
        </div>
      </div>
 
      <Separator />
 
      <div className="px-5 py-4 flex justify-between font-semibold">
        <span>Total</span>
        <span>$115.00</span>
      </div>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Controls the axis of the separator line.
`decorative`	`boolean`	`true`	When `true`, renders `role="none"` (ignored by assistive tech). When `false`, renders `role="separator"`.
`className`	`string`	—	Additional Tailwind or custom classes applied to the separator element.
`ref`	`React.Ref<HTMLDivElement>`	—	Forwarded ref to the underlying `<div>` element.

Accessibility

When decorative={true} (the default), the separator receives role="none" and is hidden from the accessibility tree. Use this for purely visual dividers that do not communicate structural meaning.
When decorative={false}, the separator receives role="separator" and is announced by screen readers. Use this when the divider marks a meaningful boundary between document sections — for example, separating navigation groups or major content regions.
The aria-orientation attribute is automatically set by Radix UI based on the orientation prop, so vertical separators are correctly identified as aria-orientation="vertical" when rendered as semantic.

Live View

Open in Storybook ↗