# Separator

A thin line that splits content into groups: sections of a card, items in a toolbar, links in a footer. Horizontal by default; vertical between items in a row. label puts a word in the middle, such as or between two ways to sign in.

## Usage

### When to use

- Split content into groups where spacing alone doesn't show where one ends: sections of a card, groups of menu items.
- Split items in a row, such as links in a footer or buttons in a toolbar.

### When not to use

- Framing content on all sides. Use Card.
- A line under every row of a list or table; rows have their own borders.
- Naming a group. Write a heading.

## Variants

### orientation

horizontal splits stacked content; vertical splits items in a row, such as toolbar buttons.

Values: `horizontal`, `vertical`. Default: `horizontal`.

## Examples

### Between sections

```tsx
<div className="flex flex-col gap-lg">
  <p className="text-sm text-text-primary">Signed in as ada@example.com</p>
  <Separator />
  <p className="text-sm text-text-secondary">Billing and invoices</p>
</div>
```

### In a row

Vertical, between links. It stretches to the height of the row.

```tsx
<div className="flex items-center gap-md text-sm text-text-secondary">
  <a href="#docs">Docs</a>
  <Separator orientation="vertical" />
  <a href="#changelog">Changelog</a>
  <Separator orientation="vertical" />
  <a href="#status">Status</a>
</div>
```

### With a label

or between two ways to sign in. The label is read where it stands.

```tsx
<div className="flex w-full max-w-xs flex-col gap-lg">
  <Button variant="secondary">Continue with email</Button>
  <Separator label="or" />
  <Button variant="secondary">Continue with a passkey</Button>
</div>
```

### Read by screen readers

Nothing else splits these two groups, so the line is a separator.

```tsx
<div className="flex flex-col gap-md">
  <p className="text-sm text-text-primary">Your projects</p>
  <Separator decorative={false} />
  <p className="text-sm text-text-primary">Shared with you</p>
</div>
```

## Do and don't

### Do

- Use spacing first; add a separator when spacing alone doesn't show where one group ends.
- Give it room on both sides with the gap of its parent, one step larger than the gap inside each group.

### Don't

- Don't put a separator under every row of a list or table; rows have their own borders.
- Don't use it to frame content on all sides; that is a Card.
- Don't use it as a heading. A label is a word such as or; a group that needs a name gets a heading.

## Props

| Name | Type | Values | Default | Description |
| --- | --- | --- | --- | --- |
| `orientation` | `enum` | `horizontal`, `vertical` | `horizontal` | horizontal splits stacked content; vertical splits items in a row, such as toolbar buttons. |
| `decorative` | `boolean` |  | `true` | Hidden from screen readers. Set false when the line is the only thing that splits two groups. |
| `label` | `node` |  |  | A word or two in the middle of a horizontal line: or. Keep it short; a group that needs a name gets a heading. |

## Anatomy

| Part | Description |
| --- | --- |
| `root` | The line: a 1px border in the divider color, the top border when horizontal (full width) and the start border when vertical (full height of the row). |
| `wrapper` | With label: the row that holds a line on each side of the label, gap-md. It takes the root's role and className. |
| `line` | With label: each line, the top border in the divider color, sharing the width that is left. |
| `label` | With label: 13px secondary text in the middle, on one line. |

## Accessibility

Role: `none`

- Decorative by default: screen readers skip it, since headings and lists already tell them where groups start.
- Set decorative={false} when the line is the only thing that splits two groups; it becomes a separator, and a vertical one says so with aria-orientation.
- With a label, the text is read where it stands. Leave a labelled line decorative: a separator role hides the text inside it from screen readers.
- A separator is never focusable and takes no keyboard input.

## Install

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/separator.json
```

This also adds `styles/werewolf.css`, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after `@import "tailwindcss"`, with a path relative to that CSS file (from `app/globals.css` it is `@import "../styles/werewolf.css"`).