# Separator

Thin divider line, horizontal or vertical. It can draw itself in as a page builds, or show a perforated tear line for tickets and receipts.

> Primitive · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add separator
```

## Import

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

## Variants

- `receipt` — Receipt: `npx @lumioui/cli add separator-receipt`
- `vertical` — Vertical: `npx @lumioui/cli add separator-vertical`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `orientation?` | `"horizontal" | "vertical"` | — |
| `decorative?` | `boolean` | Hide the rule from assistive tech (default true). Set `decorative={false}` to expose it as a semantic separator — e.g. when it carries meaning between landmark sections rather than pure decoration. |
| `draw?` | `boolean` | Draw the rule on mount: it grows from its leading edge (top for vertical) so a receipt or page build reads as structure switching on. Default false. |
| `drawDelay?` | `number` | With `draw`: wait before drawing, in ms — use the rule's band slot (e.g. 120 × band). |
| `perforated?` | `boolean` | Perforated tear line — a row of punched holes for tickets, passes and receipt stubs, instead of the hairline. Default false. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/separator