---
title: Separator
description: Divide content regions with an oriented semantic line.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---

# Separator

> Divide content regions with an oriented semantic line.

Use Separator to divide related regions with a visible line. Choose its orientation to match the layout boundary.

## Basic usage

```tsx
import { Separator } from 'moraine'

export function Example() {
  return <Separator />
}
```

## Anatomy

```text
Separator [component; slot=root; <div role="separator">]
```

## Usage

### Root styling

`Separator` has one `<div>` root. Use direct `class` and `style` props for a local override, or configure `separator.base.root` in your Theme for application defaults. It does not accept instance `classes` or `styles` maps.

```tsx
import { Separator, MoraineProvider } from 'moraine'
import { defineTheme } from 'moraine/theme'

const theme = defineTheme({
  separator: { base: { root: 'bg-emerald-500' } },
})

export function RootStyling() {
  return (
    <div class="w-full space-y-6">
      <div class="space-y-2">
        <p class="text-sm text-muted-foreground">Instance class and style</p>
        <Separator class="bg-blue-500" style={{ height: '3px' }} />
      </div>
      <MoraineProvider theme={theme}>
        <div class="space-y-2">
          <p class="text-sm text-muted-foreground">Local Theme defaults</p>
          <Separator />
        </div>
      </MoraineProvider>
    </div>
  )
}
```

### Semantic orientation

Every `Separator` exposes `role="separator"`, `aria-orientation`, and `data-orientation`. Choose horizontal or vertical orientation to match the surrounding layout.

```tsx
import { Separator } from 'moraine'

export function SeparatorUsage() {
  return (
    <div class="max-w-md w-full space-y-4">
      <div>
        <h4 class="text-sm font-medium">Moraine UI</h4>
        <p class="text-xs text-muted-foreground">Accessible SolidJS component system.</p>
      </div>
      <Separator />
      <div class="text-xs flex gap-4 h-5 items-center">
        <span>Docs</span>
        <Separator orientation="vertical" />
        <span>Source</span>
        <Separator orientation="vertical" />
        <span>Releases</span>
      </div>
    </div>
  )
}
```

## Attributes

| Attributes | Slot | Description |
| --- | --- | --- |
| `data-orientation` | `separator` | Stores the rendered orientation (horizontal or vertical). |

## Props

Props for the Separator component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| orientation | 'horizontal' \| 'vertical' \| undefined | 'horizontal' | Layout axis used by the component Recipe. |
| class | SlotClassValue \| undefined | — | Class applied to the component root or trigger element. |
| classes | Classes \| undefined | — | Family slot class defaults for this instance. |
| style | SlotStyleValue \| undefined | — | Style applied to the component root or trigger element. |
| styles | Styles \| undefined | — | Family slot style defaults for this instance. |