Skip to main content
Separator component preview (light)
  • Location: sabo/src/components/ui/separator.tsx

​
When to use

  • Visually divide content within cards, dropdowns, and pages.
  • Choose orientation based on layout direction.

​
Usage

sabo/src/components/ui/separator.tsx
import { Separator } from "@/components/ui/separator";

export function Example() {
  return (
    <div className="w-64">
      Section A
      <Separator className="my-3" />
      Section B
    </div>
  );
}

​
Key props

​
orientation
string
horizontal (default) | vertical
​
decorative
boolean
If true (default), hidden from assistive tech. Set false if used as a semantic separator.
This component forwards all props from Radix Separator primitives. Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/separator

​
Styling tip

  • Add my-3 / mx-3 spacing around separators.
  • Change color via bg-border overrides for stronger/lighter rules.

​
Accessibility

  • Keep decorative=true for visual lines only.
  • If conveying structure, set decorative=false so screen readers announce it.