# Divider

- Page: https://jiguang132.com/resources/arco-design/docs/divider
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Divide the content area and separate the modules.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Can be used to separate paragraphs of different chapters. The default is a horizontal dividing line. Text can be added within divider.
- **With Text**: Specify the position of the texts within divider by `orientation`.
- **Vertical divider**: Specify `type` as `vertical` to make it vertical. Vertical dividers can't contain texts.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Divider

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|orientation|The position of description content in Divider|'left' \| 'right' \| 'center' |`center`|
|type|Two types are available: `horizontal` and `vertical`|'horizontal' \| 'vertical' |`horizontal`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt