# Separator

> A visual divider between content sections

Status: stable. Added in Components 2.0.0. Updated in Components 2.10.0, 22 Jun 2026.

A visual divider between content sections.

## Import

```tsx
import { Separator } from '@oztix/roadie-components'
```

## Examples

### Default

```tsx
<p>Content above</p>
<Separator />
<p>Content below</p>
```

### Variants

Use `orientation='vertical'` for a vertical divider.

```tsx
<div className='flex flex-row items-center gap-3 h-6'>
  <p>Left</p>
  <Separator orientation='vertical' />
  <p>Right</p>
</div>
```

## API reference

### Separator

```tsx
import { Separator } from '@oztix/roadie-components/separator'
```

- `orientation`: `"horizontal" | "vertical" | null`.

Docs updated 19 Oct 2026.