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

# Separator

> A visual separator component for dividing content, built on @base-ui/react.

The Separator component provides a visual divider between content sections.

## Installation

```tsx theme={null}
import { Separator } from "@craftdotui/baseui/components/separator";
```

## Usage

```tsx theme={null}
<Separator />
```

## Props

<ParamField path="orientation" type="string" default="horizontal">
  Orientation of the separator.

  Options: `horizontal`, `vertical`
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes.
</ParamField>

## Examples

### Horizontal Separator

```tsx theme={null}
<div>
  <p>Content above</p>
  <Separator />
  <p>Content below</p>
</div>
```

### Vertical Separator

```tsx theme={null}
<div className="flex items-center">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>
```

### In a Menu

```tsx theme={null}
<div className="space-y-1">
  <div>Menu Item 1</div>
  <div>Menu Item 2</div>
  <Separator />
  <div>Menu Item 3</div>
  <div>Menu Item 4</div>
</div>
```

### Custom Styling

```tsx theme={null}
<Separator className="bg-primary" />
```

## Accessibility

* Built on @base-ui/react Separator primitive
* Proper semantic role="separator"
* Orientation communicated to screen readers
* Default margins for spacing