> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Separator

> Visual divider for content sections.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/separator-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=59cff390fee7dbfc990d524b953c4016" alt="Separator component preview (light)" width="240" data-path="images/ui/separator-light.png" />
</Frame>

* **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

```tsx sabo/src/components/ui/separator.tsx theme={null}
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

<ParamField path="orientation" type="string">
  <code>horizontal</code> (default) | <code>vertical</code>
</ParamField>

<ParamField path="decorative" type="boolean">
  If <code>true</code> (default), hidden from assistive tech. Set <code>false</code> if used as a semantic separator.
</ParamField>

<Note>
  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](https://www.radix-ui.com/primitives/docs/components/separator)
</Note>

## Styling tip

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

## Accessibility

* Keep <code>decorative=true</code> for visual lines only.
* If conveying structure, set <code>decorative=false</code> so screen readers announce it.