# Divider

Thin line that separates content, horizontal or vertical, with an optional centred label. An optional soft style fades the lines from the edges toward the label, and can brighten them.

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

## Install

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

## Import

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

## Variants

- `labeled` — Labeled: `npx @lumioui/cli add divider-labeled`
- `vertical` — Vertical: `npx @lumioui/cli add divider-vertical`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `label?` | `string` | Text rendered in the middle of the line. |
| `orientation?` | `"horizontal" | "vertical"` | Line direction. Default "horizontal". |
| `className?` | `string` | — |
| `labelClassName?` | `string` | Extra classes for the label text. |
| `seam?` | `boolean` | Labeled rule only: draw it as a lit seam — each rule fades in from its outer end to full strength at the label. Default false. |
| `lit?` | `boolean` | Seam only: brighten the seam one step (crossfades over `timing.fast`). |

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