Separator

Horizontal or vertical separation for meaningful boundaries between related content groups.

Purpose

Use Separator to communicate a real visual or structural boundary between related groups, toolbar actions or menu sections.

Basic usage

Account settings

Billing settings

Docs

Registry

Support

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

export function Example() {
  return <Separator />;
}

Installation

With the Siteplane registry alias configured, add the component and import the installed source from your app.

CLI

pnpm dlx shadcn@4.16.1 add @siteplane/separator

Import

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

Need the machine-readable source metadata? View registry JSON.

Usage

Separator divides related groups. Prefer spacing first; use Separator when a real boundary improves scanning.

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

export function Example() {
  return <Separator />;
}

Examples

Labeled dividers and toolbar rules are layout compositions of the same primitive. Vertical separators stretch to the height of their flex row.

With label

A three-column grid centers the label between two dividers.

<div className="grid grid-cols-[1fr_auto_1fr] items-center gap-3">
  <Separator />
  <span className="text-muted-foreground text-xs">or</span>
  <Separator />
</div>

Toolbar

Vertical separators take their height from the buttons in the row.

<div className="flex items-center gap-1">
  <Button variant="ghost">Bold</Button>
  <Separator className="mx-1" orientation="vertical" />
  <Button variant="ghost">Italic</Button>
  <Separator className="mx-1" orientation="vertical" />
  <Button variant="ghost">Link</Button>
</div>

API Reference

The reference lists the source-owned exports and props that are easy to miss in visual examples. Inherited Base UI props remain available unless the wrapper narrows them.

Separator accepts the Base UI Separator props and defaults orientation to horizontal.
Set orientation="vertical" for side-by-side content; its parent must provide a usable block size.
Use the primitive's decorative or semantic contract instead of duplicating the divider with a raw border element.

Motion

Component motion uses the shared Siteplane motion contract. See the global motion guide for provider setup, tokens and reduced-motion behavior.

Separator is static and has no motion behavior.

Accessibility

Use a decorative separator when the boundary is only visual; use semantic separator behavior when it represents a meaningful division.
Match orientation to the rendered direction so assistive technology receives the correct structure.

Implementation Guidance

Separator does not replace spacing. Keep layout gaps and padding for grouping.
Avoid stacking separators and borders when spacing or surface contrast already creates a clear boundary.