Separator

Draws a thin line between groups of content.

Library

What’s this?

Acme Corporation

Customer · Manufacturing

Details

Activity

Installation

pnpm dlx shadcn@latest add @wisty/separator

The CLI installs the Radix or Base UI file to match your project.

If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

Create an app with SeparatorBuild in Wisty to publish inside Salesforce in minutes. Nothing to deploy.Open in Wisty

When to use

Use it

To put a light break between two groups of content, like a card's details and its actions.
To put a thin line between items in a row, like links or toolbar buttons.

Don't use it

Content needs more than a line to set it apart. Use spacing or Card.
Items in a menu. Use the menu's own separator.
Table rows. Table draws its own lines.

Usage

Render a Separator between two groups and set its margin with classes:

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

<Separator className="my-3" />

A vertical separator takes orientation="vertical" and stretches to its flex row's height, so the row's height sets the line's length, as flex h-5 items-center gap-3 does in the Account summary example.

The bases differ for screen readers. In Radix projects the line is decorative by default and screen readers skip it; pass decorative={false} when it separates sections that matter to the page's structure. In Base UI projects it's always announced as a separator, and there's no decorative prop.

API reference

`Separator`

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Either `vertical` or `horizontal`.
`decorative`	`boolean`	`true`	Whether or not the component is purely decorative.

Also takes every Radix Separator.Root (opens in a new tab) prop.

SLDS mapping

A horizontal Separator is the line of slds-has-divider_top and slds-has-divider_bottom. A vertical one is slds-border_left.

Known gaps:

SLDS's spaced dividers (slds-has-divider_top-space) carry their own margin. Add it with my-2.
SLDS's vertical divider, slds-has-divider_left, is a small dot before an item. Separator draws a line instead.

Prop	Value	SLDS	Notes
`orientation`	`horizontal`	`slds-has-divider_top`
`orientation`	`vertical`	`slds-border_left`	SLDS's own vertical divider, slds-has-divider_left, is a dot. This draws a line.

Rules

Put a vertical separator in a flex row. In a plain block it has no height, so it doesn't show.
Don't recolor the line. Its color comes from the theme's border token.