Divider
A visual separator for grouping content. Available in horizontal and vertical orientations, two colours, four thicknesses, and full or inset lengths.
Loading preview…
1
'use client';2
3
import { Divider } from 'sdaia-ui';4
5
const GROUPS = [Installation
npx sdaia-ui@latest add divider
Usage
import { Divider } from "@/components/ui/divider"<Divider />Examples
Horizontal
Horizontal divider spanning the full container width.
1
<Divider lineType='horizontal'/>Vertical
Vertical divider used to separate inline content.
Loading preview…
1
<div className="flex flex-row items-stretch gap-spacing-3xl h-[80px]">2
<Divider lineType="vertical" thickness="hairline" />3
<Divider lineType="vertical" thickness="thin" />4
<Divider lineType="vertical" thickness="regular" />5
<Divider lineType="vertical" thickness="thick" />Thickness
Divider in Hairline, Thin, Regular, and Thick weights.
Loading preview…
1
<div className="flex flex-col gap-spacing-3xl w-full">2
<Divider thickness="hairline" />3
<Divider thickness="thin" />4
<Divider thickness="regular" />5
<Divider thickness="thick" />Inset
Inset divider with padding on both sides.
Loading preview…
1
<div className="flex flex-col gap-spacing-3xl w-full">2
<Divider length="inset" />3
<Divider length="inset-start" />4
<Divider length="inset-end" />5
</div>API Reference
DividerProps
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 |