Divider

Utilities

A visual separator for dividing content sections. Use dividers to create clear visual breaks between distinct pieces of content.

Import

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

Usage

Horizontal Divider

Standard horizontal line separator

Content above the divider

Content below the divider

With Label

Divider with centered text

Or continue with

Vertical Divider

Vertical line for separating inline content

Home

Products

About

In Card

Divider separating card sections

Section 1

First section content

Section 2

Second section content

Section 3

Third section content

Responsive Layout

Dividers adapt to layout changes on different screen sizes

Horizontal on mobile, vertical on desktop

Section A

Section B

Section C

Stacked on mobile, inline on desktop

API Reference

orientation"horizontal"

"horizontal" | "vertical"

Direction of the divider

label—

string

Optional text label in the center

children—

ReactNode

Alternative to label prop for custom content

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	Direction of the divider
`label`	`string`	—	Optional text label in the center
`children`	`ReactNode`	—	Alternative to label prop for custom content

Card