Phara UI v2.x
Login

Separator

A visual divider used to separate content or group related items.

Basic

Standard horizontal divider.

Above the line

Below the line

Blade 
<x-ui::separator />
Orientation

Use the orientation prop to switch between horizontal and vertical dividers.

Blog

Docs

Source

Blade 
<!-- Horizontal (Default) -->
<x-ui::separator orientation="horizontal" />

<!-- Vertical -->
<div class="flex h-5 items-center gap-4">
    <div>Blog</div>
    <x-ui::separator orientation="vertical" />
    <div>Docs</div>
    <x-ui::separator orientation="vertical" />
    <div>Source</div>
</div>
With Label

Display a text label in the center of a horizontal separator.

OR
Continue with
Blade 
<x-ui::separator label="OR" />
<x-ui::separator label="Continue with" />