Separator

Visual divider for sections and inline groups. Prefer horizontal in stacks; use vertical between related actions.

Examples

Horizontal

Profile

Billing

Team

Vertical

Home

Docs

Support

Overview

Separator draws a thin rule between content. Default orientation is horizontal. Set orientation="vertical" when dividing items in a row. Built on Base UI for correct semantics.

tsx

import { Separator } from "@standard-ui/react"

<Separator />
<Separator orientation="vertical" />

Usage

Horizontal

Place between stacked sections or list groups. The separator spans the full width of its container by default.

tsx

<div className="flex flex-col gap-3">
  <p>Profile</p>
  <Separator />
  <p>Billing</p>
</div>

Vertical

Use in a flex row with a fixed height so the vertical rule has room to stretch. Common between nav links or toolbar actions.

tsx

<div className="flex h-6 items-center gap-3">
  <a href="#">Home</a>
  <Separator orientation="vertical" />
  <a href="#">Docs</a>
</div>

API

Separator accepts Base UI Separator props.

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the divider.
decorative	boolean	true	When true, treated as presentational for assistive tech.

Guidelines

Do

Use separators to group related content, not every row
Give vertical separators a sized parent so they have height
Keep spacing consistent around the rule

Don't

Don't stack many separators — prefer whitespace when possible
Don't use separators as a substitute for clear headings
Don't place vertical separators without a height constraint