# Separator

A thin line between groups of content.

```tsx
import { Separator } from "@/components/ui/separator"

<Separator />
```

## Usage

### What you provide
- `orientation`: `horizontal` (default) | `vertical`. Margins come from the parent layout (`my-4`, `gap-4`).
- Prefer space (`gap-6`) over lines. Use a Separator when space alone doesn't separate the groups.

## Accessibility

- A separator is decorative by default and hidden from screen readers. Structure comes from headings, lists and landmarks, not from lines.
- Use `decorative={false}` only when the line separates groups whose boundary isn't conveyed any other way.

_Adapted from Magoo 1.6.0 by Marcelo Sales: [Page regions](https://magoo.cc/en/components/structure/page-regions.html) (`regioes-pagina`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add separator
```

```tsx
<Separator />
```

### Separator

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Direction of the line. |
| `decorative` | `boolean` | `true` | Hidden from screen readers. Set `false` only when the line is the only boundary between groups. |

## Related pages

- [Card](https://aline-aroucha.github.io/pui/components/card.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/separator.html