Separator

Usage

<p>Above the line</p>
<SSeparator />
<p>Below the line</p>

Vertical

orientation="vertical" needs a real height to size against - a flex row with a fixed height (or items-stretch) gives it one:

<div class="flex h-5 items-center gap-3">
  <span>Docs</span>
  <SSeparator orientation="vertical" />
  <span>Utilities</span>
</div>

Variant

variant switches the line style between solid (default), dashed, dotted, and double - matching CSS's own border-style keywords, since that's what each one maps to under the hood:

<SSeparator variant="dashed" />

Color

Unlike most components in this library, color isn't gated behind a focus/hover state - the line is always visible, so it tints directly. neutral (default) is the same subtle border color this component always used; the rest give a divider real emphasis:

<SSeparator color="danger" />

With a label

Content in the default slot centers in the line, splitting it evenly on both sides:

<SSeparator>Or continue with</SSeparator>

Custom :ui

Global and scoped recipe overrides use ui.separator.

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's Separator's own theme file:

Props

decorative renders role="none" instead of the default role="separator" - use it when the line is purely visual (inside a toolbar, say) rather than marking a real thematic break in content.

Slots