ComponentClient component

Separator

Visually or semantically separates content in horizontal and vertical layouts.

Installation

Rivelle primitives

Designed to be composed.

Docs

Components

Registry

tsx

import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {
  return <Separator className="my-4" />
}

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Controls the separator axis.
`decorative`	`boolean`	`true`	Removes semantic meaning when used only visually.
`className`	`string`	`—`	Overrides or extends separator styling.