Separator

A Radix-based separator for visually dividing content horizontally or vertically.

Preview

Section One

Content above the separator.

Section Two

Content below the separator.

Installation

npx shadcn@latest add @shadszn/separator

Usage

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

export default function Example() {
  return (
    <div>
      <h3>Section One</h3>
      <Separator className="my-4" />
      <h3>Section Two</h3>
    </div>
  )
}

Vertical

<div className="flex items-center h-8 gap-4">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

Props

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction of the separator line.
decorative	boolean	true	When true, separator is purely visual and hidden from screen readers.
className	string	---	Additional CSS classes.