Separator

The Separator component visually or semantically separates content in horizontal or vertical layouts with built-in accessibility.

Usage

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

export function ExampleSeparator() {
  return (
    <div className="flex h-5 items-center gap-4 text-sm font-medium">
      <span>Blog</span>
      <Separator.Root orientation="vertical" />
      <span>Pricing</span>
      <Separator.Root orientation="vertical" />
      <span>Docs</span>
    </div>
  );
}

Preview

adn-ui Design System

An open-source UI component library built for React 19 & Next.js.

Docs

Components

Source

Custom Styling

Apply custom gradient colors, height/thickness, or margin offsets via className:

<Separator.Root orientation="horizontal" className="bg-gradient-to-r from-transparent via-indigo-500/50 to-transparent my-6 h-[2px]" />

Styling & Class Names

Target internal separator CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.separator`	Root separator line	Horizontal or vertical divider line.

Anatomy

import { Separator } from "@base-ui/react/separator";

<Separator />;

API Reference

Separator.Root Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Orientation layout direction of the separator element.