Separator

Visually or semantically separates content. Defaults to decorative so assistive tech can ignore it unless you need a true thematic break.

Basic

Divide sections horizontally; nest vertical bars in a row.

Installation

CLI

npx @sonojs/ui@latest add separator

Composition

structure

Separator

Usage

separator.tsx

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

export function Example() {
  return (
    <div>
      <div>Above</div>
      <Separator className="my-4" />
      <div>Below</div>
    </div>
  )
}

Props

Prop	Type	Default	Description
orientation	"horizontal" · "vertical"	"horizontal"	Axis of the separator line.
decorative	boolean	true	When `true`, removes the separator from the accessibility tree.
className	string	—	Merge extra Tailwind classes (e.g. spacing).