> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Divider

> A horizontal separator used to divide content sections.

```tsx theme={null}
import { Divider } from "@fanvue/ui";
import type { DividerProps } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-divider--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="160" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Divider — Default" />
</Frame>

```tsx theme={null}
import { Divider } from "@fanvue/ui";

<Divider />
```

## With Text

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-divider--with-text&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="160" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Divider — With Text" />
</Frame>

```tsx theme={null}
import { Divider } from "@fanvue/ui";

<Divider label="or" />
```

## In Content

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-divider--in-content&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="160" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Divider — In Content" />
</Frame>

```tsx theme={null}
import { Divider } from "@fanvue/ui";

<div className="w-80 space-y-4">
  <p className="text-sm">Section 1</p>
  <Divider />
  <p className="text-sm">Section 2</p>
  <Divider label="or" />
  <p className="text-sm">Section 3</p>
</div>
```

## Custom Text

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-divider--custom-text&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="160" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Divider — Custom Text" />
</Frame>

```tsx theme={null}
import { Divider } from "@fanvue/ui";

<Divider label="Custom label" />
```

## Props

## Divider

A horizontal separator used to divide content sections. Optionally displays a centred text label between two lines.

<ParamField path="asChild" type="boolean" />

<ParamField path="label" type="string">
  Optional centred label text. When provided, the divider renders as two lines with the label between them.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `DividerProps`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)