## Overview [#overview]
The `Separator` component provides a visual divider to separate content sections. It can be oriented horizontally or vertically and is built on Base UI primitives for accessibility.
## Usage [#usage]
```tsx
import { Separator } from "@tilt-legal/cubitt-components/primitives";
```
```tsx
// Horizontal separator (default)
// Vertical separator
```
## Examples [#examples]
### Horizontal [#horizontal]
Use a horizontal separator to divide content sections vertically.
```tsx
import { Separator } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
Section One
This is the first section of content.
Section Two
This is the second section of content.
);
}
```
### Vertical [#vertical]
Use a vertical separator to divide content sections horizontally.
```tsx
import { Separator } from "@tilt-legal/cubitt-components/primitives";
export default function Component() {
return (
Item OneItem TwoItem Three
);
}
```
## API Reference [#api-reference]
### Separator [#separator]
A visual divider for separating content.
| Prop | Type | Default | Description |
| ------------- | ---------------------------- | -------------- | ----------------------------------------- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | The orientation of the separator. |
| `className` | `string` | — | Additional CSS classes for the separator. |