> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/divider.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Divider

Separate content, paragraphs or actions.

## Basic usage


Project details

Settings

More content

EditShareArchive

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/divider/basic.tsx"
import { Divider, Space } from '@ifhover/leaf-ui';

export function DividerBasic() {
  return (
    <Space direction="vertical" align="stretch">
      <p>Project details</p>
      <Divider>Settings</Divider>
      <Divider align="start" dashed>
        More content
      </Divider>
      <div>
        Edit
        <Divider type="vertical" />
        Share
        <Divider type="vertical" dashed />
        Archive
      </div>
    </Space>
  );
}
```

Expand code

## Divider API

| Property   | Type                           | Default        | Description             |
| ---------- | ------------------------------ | -------------- | ----------------------- |
| `type`     | `'horizontal' \| 'vertical'`   | `'horizontal'` | Orientation             |
| `align`    | `'start' \| 'center' \| 'end'` | `'center'`     | Text alignment          |
| `dashed`   | `boolean`                      | `false`        | Dashed line             |
| `children` | `ReactNode`                    | —              | Horizontal divider text |

## Types

Import the exported types when defining props or building item lists.

```ts
import type { DividerProps } from '@ifhover/leaf-ui';
```

## Usage notes

Use vertical dividers between inline content.