Separator

A thin visual divider for separating sections of content. Built on @base-ui/react/separator. Supports horizontal (default) and vertical orientations.

Anatomy

A single <Separator> renders as a <div> with data-slot="separator" and role="separator". Width and height are set via data-horizontal / data-vertical attribute selectors.

Above the separator

Below the separator

Orientations

Horizontal

Section One

Section Two

Section Three

Vertical

BlogDocsGitHub

Common Patterns

Separators are frequently used in navigation breadcrumbs, menu dividers, and form section breaks.

Breadcrumb-style

HomeProductsDetails

Form sections

Personal Information

Name, email, phone

Billing Details

Card, address, invoices

Design Guidelines

Do

  • Use to separate distinct content groups. Separators work best between conceptually different sections.
  • Use vertical orientation inside flex rows. Breadcrumbs, tab bars, and inline metadata lists are common patterns.
  • Rely on spacing too. A separator combined with adequate margin creates a clear visual break.

Don't

  • Don't overuse as decoration. Too many separators fragment the layout without adding clarity.
  • Don't replace whitespace with separators. Generous margins between elements are often enough.
  • Don't use vertical separators without a fixed height container. Without an explicit height the separator will collapse to zero.

Developer Reference

Accessibility

  • Renders with role="separator" and aria-orientation set automatically by the base-ui primitive.
  • Purely decorative separators should pass aria-hidden="true" to remove them from the accessibility tree.
  • Vertical separators require the parent container to have an explicit height — otherwise the separator collapses.

Usage

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

// Horizontal (default)
<Separator />

// Vertical — parent must have a height
<div className="flex h-5 items-center gap-3">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

// Decorative (hidden from screen readers)
<Separator aria-hidden="true" />