Basel Standard / Docs

Separator

Structural divider for grouping related content, toolbar clusters, and quiet section breaks.

Issue briefing

Use separators to divide related groups without introducing another card shell.

Separators create structure without adding another card, border box, or heading. In this system they are intentionally quiet: a single rule that helps related groups read distinctly while leaving hierarchy to the surrounding content.

Installation

Install

Purchase access, then open /account/install to issue a registry token.

Usage

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

<div className="grid gap-3">
  <div>Issue overview</div>
  <Separator />
  <div>Release notes</div>
</div>

Why This Primitive Exists

Some surfaces need a structural pause, not another container.

Use separators to divide related controls, metadata blocks, or inline navigation clusters.
Prefer them when a new card or section heading would add too much emphasis.
Avoid them when spacing alone already communicates the grouping clearly.

Examples

Horizontal Rules

The default horizontal separator works best between short content blocks that belong to the same larger surface.

Issue briefing

Use separators to divide related groups without introducing another card shell.

<div className="grid gap-3">
  <div>Issue briefing</div>
  <Separator />
  <div>Release note summary</div>
</div>

Vertical Dividers

Vertical separators are useful in compact nav and toolbar rows where action groups share one line but not one purpose.

Overview

Assets

Distribution

<div className="flex items-center">
  <span>Overview</span>
  <Separator orientation="vertical" className="mx-2 h-6" />
  <span>Assets</span>
</div>

In Context

Use separators in dense control strips to create small clusters the eye can parse quickly.

Toolbar structure

Separators help dense controls read as clusters instead of one long control strip.

They are most useful when actions share a row but not the same purpose.

Guidance

Let Structure Stay Quiet

Use separators when the relationship between groups is already clear.
If the break should introduce a new section, use a heading or new container instead.
Do not stack several separators where spacing and layout could solve the same problem more cleanly.

Match The Axis To The Layout

Use horizontal separators in stacked content.
Use vertical separators in inline nav, metadata rows, and toolbars.
Set an explicit height for vertical separators so the rule aligns with the neighboring controls.

Respect Accessibility Intent

Keep the default decorative behavior when the divider is purely visual.
Set decorative={false} only when the separator should be exposed semantically.
Avoid using separators as the only sign of hierarchy. Labels, spacing, and order should still do the main work.

API Reference

Separator

Separator wraps @radix-ui/react-separator and defaults to a decorative horizontal rule.

Prop	Type	Default	Notes
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Switches the rule axis.
`decorative`	`boolean`	`true`	Keeps the separator out of the accessibility tree unless it carries meaning.
`className`	`string`	`undefined`	Extends the base border color and sizing.

Built-In Behavior

Area	Detail
Horizontal	Renders as `h-px w-full`.
Vertical	Renders as `h-full w-px`; provide a parent height or explicit class when needed.
Color	Uses the shared border token so the rule stays structural and subdued.

Because the component is a thin wrapper around Radix Separator, the standard DOM and separator props remain available.

Previous: Select Next: Sheet