# antuikit / Divider

> Divider with a `wave` line style and a `none` size that removes the margin.

Docs: https://antuikit.com/docs/components/divider

## Install

npx antuikit@latest init
npx antuikit@latest add divider

## Import

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

## Demos

- [Basic](https://ui.antuikit.com/embed/divider/basic.md): A `Divider` draws a solid horizontal line between two blocks of content, here with `size="small"` for tighter spacing.
- [Variant](https://ui.antuikit.com/embed/divider/variant.md): Set `variant` to `solid`, `dashed`, `dotted` or `wave` to change how the line is drawn, from a straight rule to a scalloped one.
- [Size](https://ui.antuikit.com/embed/divider/size.md): Set `size` to change the space above and below the line, from `none`, which sits flush, to `large`, the default.
- [Vertical](https://ui.antuikit.com/embed/divider/vertical.md): Set `vertical` to run the line between inline items, like links or the details of a post, in any `variant`.
- [With a title](https://ui.antuikit.com/embed/divider/with-title.md): Pass `children` to put a title in the middle of the line, such as a word or an icon with a label.
- [Title placement](https://ui.antuikit.com/embed/divider/title-placement.md): Set `titlePlacement` to `start`, `center` or `end` to move the title along the line, and it flips on its own in right-to-left layouts.
- [Plain text](https://ui.antuikit.com/embed/divider/plain.md): Set `plain` to show the title at body weight, for a short label on the line like "or" rather than a section name.
- [Custom content](https://ui.antuikit.com/embed/divider/custom-content.md): Pass any node as `children`, like a button or a dropdown, and clear the title's side padding with `classNames` so the line meets it.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/divider`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Divider` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.