Divider
UtilitiesA 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
HomeProductsAbout
In Card
Divider separating card sections
Section 1
First section content
Section 2
Second section content
Section 3
Third section content
API Reference
| 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 |