Divider

Dividers are used to visually separate content sections. They support horizontal and vertical orientations, with optional text content.

Divider Playground

Preview

Code

Controls

Orientation:

Horizontal

Vertical

Style:

Simple

Intrusion

Content:

None

Text

Icon

Installation

You can add the divider component to your project manually:

Copy and paste the following code into your project.

Divider.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

// Simple horizontal divider
<Divider />
// Intrusion style (with shadow effect)
<Divider style="intrusion" />
// Vertical divider
<Divider orientation="vertical" />
// Divider with text
<Divider content="text" text="OR" />

Accessibility

Uses role="separator" with proper aria-orientation
Decorative dividers do not add semantic noise
Text content within dividers remains accessible

Divider Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Divider direction.
`style`	`'simple' \| 'intrusion'`	`'simple'`	Visual style variant.
`content`	`'none' \| 'text' \| 'icon'`	`'none'`	Content type to display.
`text`	`string`	`'OR'`	Text content when content is "text".