Separator

A lightweight divider for splitting content regions, toolbar groups, and stacked dashboard sections.

Preview & Interactive Laboratory

Section Breaks

Revenue Control Center

Separate headline metrics from supporting notes without introducing another full card shell.

Net New

$184.2K

Coverage

3.6x

Risk

7 Open

SyncedReviewedEscalate

Toolbar Groups

Guardrails Enabled

Usage & Implementation

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

<Separator />
<Separator orientation="vertical" className="h-6" />
React / Tailwind

Granular Customization

1

Orientation

Switch between horizontal and vertical separators.

className={`orientation='vertical'`}
2

Surface Tone

Choose border contrast for light, glass, or accented contexts.

className={`variant='glass'`}
3

Spacing

Control rhythm with surrounding margins or explicit length classes.

className={`className='my-6'`}

API Reference (Props)

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Divider axis.
variant'default' | 'muted' | 'glass' | 'primary''default'Visual tone for the line.
decorativebooleantrueSet to false when the separator conveys semantic structure.