Separator

A simple line or divider used to visually separate groups of content or UI elements.

Default separator

Success separator

Danger separator

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Separator

import { Separator } from "@/components/display-ui/Separator"

<Separator />

For Separator Component

Attribute	Type	Description	Default
variant	`"default" \| "danger" \| "success"`	Controls the color style of the separator.	"default"
size	`"sm" \| "md" \| "lg"`	Controls the vertical spacing around the separator.	"md"
orientation	`"horizontal" \| "vertical"`	Controls whether the separator is horizontal or vertical.	"horizontal"
decorative	`boolean`	When true, renders the separator as decorative only without accessibility semantics.	false
className	`string`	Additional CSS classes to customize the separator styling.	-