Separator

Accessible visual separator with horizontal or vertical orientation and optional centered labels. Also available as sub-components inside dropdowns, navlists, context menus, and OTP inputs.

Basic Usage

Horizontal separator (default):

Section 1

Section 2

<neura::separator />

Vertical

Use the vertical prop in horizontal layouts:

Left

Center

Right

<div class="flex items-center gap-4 h-24">
    <span>Left</span>
    <neura::separator vertical />
    <span>Right</span>
</div>

With Label

Add a centered label for grouped sections:

Or continue with

Item A

Item B

<neura::separator label="Or continue with" />

<neura::separator vertical label="or" />

Sub-components

Context-specific separators inherit menu/list styling:

neura::dropdown.separator
neura::navlist.separator
neura::context-menu.separator
neura::otp.separator

Divider vs Separator vs Spacer

Use neura::divider for simple edge-colored lines, neura::separator for a stronger neutral line with spacing, and neura::spacer for invisible vertical gaps. See the Divider page for a full comparison.

Properties

Property	Type	Default	Description
vertical	boolean	false	Render a vertical separator instead of horizontal
label	string\|null	null	Optional centered label between line segments
variant	string\|null	null	Reserved for future styling variants

Neura UI