# Divider

> A hairline rule, horizontal or vertical, optionally labelled, with spacing steps.

Category: Layout and surfaces. Docs page: https://rime.mjsons.net/components/divider

## Installation

```bash
npx shadcn@latest add KezLahd/rime/divider
```

Divider separates groups inside a panel. label puts a short word in the rule ("or").

## Usage

```tsx
import { Divider } from "@/components/ui";

<Divider spacing="sm" />
```

## Props: Divider

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
| `label` | `ReactNode` |  | Centred text in the rule: "or", a section name. |
| `spacing` | `"none" \| "sm" \| "md" \| "lg"` | `"md"` | Vertical margin for horizontal dividers. |
| `className` | `string` |  |  |

## Examples

### Default and labelled

```tsx
<Divider />
<Divider label="or" />
```

## Theme tokens

System tokens it reads: `--ink-muted`, `--line-glass`, `--line-soft`, `--text-micro`, `--tracking-eyebrow`.

## Accessibility

- role="separator" with aria-orientation; decorative rules inside lists are hidden.

## Do

- Prefer space over rules where space does the job.

## Don't

- Don't stack dividers and borders on the same edge.