A visual separator for grouping content. Available in horizontal and vertical orientations, two colours, four thicknesses, and full or inset lengths.
Loading demo: divider-real-world
npx sdaia-ui@latest add divider
import { Divider } from "@/components/ui/divider"<Divider />Horizontal divider spanning the full container width.
Loading demo: divider-default
Vertical divider used to separate inline content.
Loading demo: divider-vertical
Divider in Hairline, Thin, Regular, and Thick weights.
Loading demo: divider-thicknesses
Inset divider with padding on both sides.
Loading demo: divider-inset
Props for the Divider component.
Prop | Type | Default | Required |
|---|---|---|---|
lineType | 'horizontal' | 'vertical' | 'horizontal' | optional |
color | 'neutral' | 'primary' | 'neutral' | optional |
thickness | 'hairline' | 'thin' | 'regular' | 'thick' | 'hairline' | optional |
length | 'full' | 'inset' | 'inset-start' | 'inset-end' | 'full' | optional |
rtl | boolean | false | optional |