# Separator

A quiet divider between content: plain rule, fading edges, soft dots, a labelled break or an icon knot.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/separator
```

## Usage

```tsx
import { Separator } from '@/components/fetaui/separator'

export function Example() {
  return <Separator kind="label" label="OR" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| orientation | horizontal, vertical | horizontal |
| kind | line, fade, dotted, label, icon | line |
| label | string |  |
| icon | ReactNode | plus |
| semantic | boolean | false |
| appear | boolean | false |
| animated | boolean | true |

## When to use

- Only when space alone does not group content.
- Line inside cards and lists, Fade for floating content and menus, Dotted before totals, Label for choices and time breaks.

## When not to use

- Above the first row or below the last row of a list.

## Accessibility

- Hidden from assistive tech by default, as it is purely visual.
- Set `semantic` when the division means something, like groups in a menu.
- Labels like OR are read as text.

## Motion

- Separators stay still. With `appear`, the rule draws from the centre in 240 ms.
- The label fades up 4 px and the knot pops in, 200 ms each.
- With reduced motion, they appear.