Divider Component

Horizontal and vertical divider component with label support.

Notes

Basic usage

Default divider

Above

Below

With label

OR

Label positions

Start
End

Line styles

Solid (default)

Solid

Dotted

Dotted

Dashed

Dashed

Slash

Slash

Sizes (divider-1 ~ divider-10)

1 (1px)
2 (2px)
3 (3px)
4 (4px)
5 (5px)
6 (6px)
7 (7px)
8 (8px)
9 (9px)
10 (10px)

Custom size via --divider-size

20px

Theme colors

Primary
Secondary
Tertiary
Success
Error
Info
Warning
Caution
Highlight
Ink
Title
Description
Caption
Placeholder

Custom colors

Multiple color formats are supported:

blue-200
blue-500
[#ff0000]

Vertical divider

Basic vertical

Left
Right

Vertical with label

Left
OR
Right

Vertical dashed

Left
Dashed
Right

Vertical dotted

Left
Dotted
Right

Vertical slash

Left
Slash
Right

Vertical with color

Left
Primary
Right

Use cases

Form section divider

Basic info

Name: John  |  Age: 28  |  Dept: Tech

Contact

Email: john@example.com

Phone: 138-0000-0000

Navigation separator

Home
Products
Services
About

Style + color combinations

Info
Warning
Error