Separator

One div that draws one hairline, plus the margin around it. Horizontal to split stacked blocks of content, vertical to split things sitting side by side in a flex row. It holds no content and carries no semantics — it is the plainest divider in the system, and the one you reach for when nothing else on the page is already drawing the line for you.

import { Separator } from '@scaler-tech/aurora/separator'

Examples

Horizontal — between stacked sections

Portfolio overview

52 assets across 4 countries, 380,000 m² gross floor area.

Financial planning

Retrofit budget scheduled through 2032, indexed to the 1.5°C pathway.

Vertical — between toolbar actions

The h-4 on each rule is doing real work — a vertical separator has no intrinsic height, so without it these lines would not paint at all.

API

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Horizontal draws border-t h-px my-4; vertical draws border-l w-px mx-4. A vertical rule has no intrinsic height, so it paints nothing until the flex row stretches it or you pass one (classes="h-4")
classes	string	''	Extra classes, merged over the base with twMerge. This is the override channel — a plain class attribute lands next to the base classes instead of replacing them, so class="my-0" leaves my-4 on the element and stylesheet order picks the winner

The base sets border-t / border-l with no border color, so the rule inherits whatever the host app's default border is. Pass classes="border-primary" when you want the token.

<RoadmapPortfolioOverview />
<Separator classes="border-primary" />
<FinancialPlanning />

<!-- vertical: give it a height, or it renders as nothing -->
<Separator orientation="vertical" classes="border-primary mx-2 h-4" />

<!-- the inset margin is baked in; kill it through `classes`, never `class` -->
<Separator classes="my-0" />

Gotchas

• Most families draw their own dividers, and a second one double-lines them: StatBar cells, filter panels (use FilterSeparator), menus and comboboxes all ship their own.
• It is a bare div with no role="separator", so screen readers get nothing from it. Fine as decoration; if the split carries meaning, the surrounding structure has to say so.