Divider is installed into your project as a file you own. It takes the same props as Ant Design v6's Divider and adds two values: wave on variant and none on size, marked antuikit in the API table below. If you are porting v5 code, read the orientation row first.
Install
npx antuikit@latest init
npx antuikit@latest add divider
The first command installs AntuikitProvider and the theme tokens, the second adds this component.
Import
From @/components/ui/divider, never from antd. The file lives in your project, so the import is a path, not a package.
import { Divider } from "@/components/ui/divider"
The axes
Four props that each take one of a fixed set of values. They match the Figma properties on the Design tab.
orientation is the axis: horizontal or vertical. The vertical boolean and the deprecated type say the same thing, and orientation wins over both. A wave follows whichever one you use.
titlePlacement is where the title sits: start, center (the default) or end, which flip under dir="rtl". The older left and right still work but stay on the same physical side in both directions.
variant is the line style: solid, dashed, dotted or the kit's wave. Resize a wave with --wave-size, --wave-thickness and --wave-curve, since an h-* utility stretches it.
size is the margin above and below the line, not its thickness: small, medium (also spelled middle) or large, the default. The kit's none removes the margin in either orientation. The other three do nothing on a vertical divider.
Flags
Three booleans. Two of them are older spellings of the props above.
vertical is short for orientation="vertical". A vertical divider takes its height from the line of text it sits in, so a bare <Divider vertical /> between two blocks has no height. Put it in a flex row, a Space or a line of text. It shows no title.
dashed draws the same line as variant="dashed", and there is no boolean for dotted. Use variant. The boolean logs no warning, so nothing will remind you to switch. variant="wave" wins over it.
plain shows the title at body weight, for a label on the line rather than a section name. It does nothing without a title.
Slots
The props that take a node. Put your own markup here before reaching for a descendant selector.
Divider has one, children: the title in the middle of the line. It takes any node, so an <Icon> works and follows the icon pack. The title renders inside a <span>, so keep what you pass inline.
The slot is horizontal only. A vertical divider with children renders no title and logs a warning in development.
Events
Divider has no event props.
Styling
classNames and styles take the same three keys: root, rail for the line and content for the title. On a divider without a title, the rail is the root element. Use these before a descendant selector: a part with a key keeps its name across versions.
1
<Divider
2
classNames={{
3
root: "…",
4
rail: "…",
5
content: "…",
6
}}
7
/>
A Tailwind utility on one of these keys wins without !important. Setting a component token's CSS variable on the root does not work: style the part instead.
API Reference
Divider
Divider's props. Rows marked antuikit in the Version column are added by the kit.