Separator

A visual or semantic divider between content, horizontal or vertical, optionally labelled.

Components you own, motion you'll love.

Docs

Components

Themes

Playground

Tweak the props, the preview and the code follow.

or continue with

Props

orientation

label

<Separator>or continue with</Separator>

npx @plumsydev/plum-ui add separator

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

<Separator />
<Separator orientation="vertical" />
<Separator>or</Separator>

Pass children to center a label between two lines.

or continue with email

Vertical separators group related controls.

Prop	Type	Default
`orientation` Direction of the divider.	`"horizontal" \| "vertical"`	`"horizontal"`
`decorative` When false, exposes a `separator` role to assistive tech.	`boolean`	`true`
`children` Optional centered label (horizontal only).	`ReactNode`	`—`