Separator

A thin horizontal or vertical dividing line built on Base UI's Separator primitive for visually separating content sections.

Default

Section A

Section B

LeftRight
Custom Styling

Default

Thicker (2px)

Accent color

Destructive color

Dashed via gradient

Centered short (50% width)

In Card

Account Summary

Your usage this billing period

API Requests12,450
Storage used2.3 GB
Bandwidth18 GB
Estimated total$24.00
In Nav
Vertical

Inline content with vertical separators

OverviewAnalyticsReportsSettings

Tall column split

Column A

First piece of content here.

Column B

Second piece of content here.

With Label
or
Continue with
see all

Installation

npx shadcn@latest add @byronwade/separator

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Controls whether the separator renders as a horizontal line or a vertical rule.
classNamestring—Additional CSS class names to apply to the separator element.