Divider

Visual separator with optional label.

layoutseparatorvisual

Import

import { Divider } from "@/components/ui";

Basic Usage

Divider Preview

Solid

Dashed

With label

Vertical

Left

Center

Right

Code

tsx

<Divider />

Orientations

Horizontal and vertical dividers

1<div className="space-y-4">
2  <Divider orientation="horizontal" />
3  <div className="flex items-center gap-4 h-10">
4    <span>Left</span>
5    <Divider orientation="vertical" />
6    <span>Right</span>
7  </div>
8</div>

Line Styles

Different line styles

1<div className="space-y-4">
2  <Divider variant="solid" />
3  <Divider variant="dashed" />
4  <Divider variant="dotted" />
5</div>

With Label

Add text in the middle

1<Divider label="OR" />

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring