Splitter installs into your project as a file you own. It takes the same props as Ant Design's Splitter and adds two, emphasis and grip, for the drag bar. The collapse chevrons come from your icon pack. Both new props are marked antuikit in the API table.
Install
npx antuikit@latest init
npx antuikit@latest add splitter
The first command sets up AntuikitProvider and the theme tokens, and the second adds Splitter.
Import
Import from @/components/ui/splitter, not from antd. Once installed, the file lives in your project. It exports Splitter, with Splitter.Panel attached, and SplitterPanel on its own.
import { Splitter, SplitterPanel } from "@/components/ui/splitter"
The axes
Three props take a value from a list: one from Ant Design and two from the kit.
orientation takes horizontal (the default) or vertical. The vertical boolean and the old layout prop also work. It also picks the direction of the collapse chevrons.
emphasis takes subtle, default or strong and sets how visible the rail is. subtle shows it on hover, default draws a hairline at the theme's lineWidth, and strong keeps Ant Design's wider bar.
grip takes false, "auto" or true and sets whether the drag handle shows. The values match Panel.collapsible.showCollapsibleIcon.
subtle and default draw the rail at the theme's lineWidth, like a border. If you set components.Splitter.splitBarSize in your theme, use emphasis="strong", which keeps that width.
The grip is a rounded handle in the opaque colorGrip token. Its size comes from the theme: splitBarSize is its width and splitBarDraggableSize its length.
Splitter.Panel
Each region is a Splitter.Panel, with a bar between each pair. It takes the same props as Ant Design's Panel, and is also exported as SplitterPanel.
defaultSize sets the starting size and size controls it, in pixels or a percentage. Give every panel one or the other, never a mix.
min and max limit the drag, in the same units.
resizable defaults to true. A panel with resizable={false} locks the bars on both sides of it.
collapsible here is boolean | { start, end, showCollapsibleIcon }: which way this panel collapses, and when its button shows ("auto" by default). The Splitter's own collapsible is { motion, icon } and does not turn collapsing on.
destroyOnHidden unmounts a collapsed panel's content instead of hiding it, overriding the Splitter's own setting for that panel.
A Splitter has no height of its own, so inside a parent with an automatic height it collapses to a blank gap. Give the root a height. Each panel then scrolls its own content and the bars stay put.
Flags
Three booleans, all off by default.
vertical is a shorthand for orientation="vertical", read only when orientation is not set. Do not set both.
destroyOnHidden unmounts a collapsed panel's content instead of keeping it. A panel's own destroyOnHidden wins over this one.
lazy resizes only when the drag ends, with a preview line meanwhile. Use it when a panel is expensive to lay out again, at the cost of a live preview.
Slots
Two props on the bar take a node.
collapsible.icon is the pair of collapse chevrons, { start, end }. Leave it out and the kit uses your icon pack's chevrons for the current axis, which mirror in right-to-left layouts. collapsible.motion beside it is a boolean that animates collapsing.
draggerIcon replaces the middle of the bar with your node. It has no default, so the bar is a plain line unless you pass one.
With your own collapsible.icon, the collapse button keeps its background and hover states, because the kit restores what Ant Design removes in that case.
A draggerIcon replaces the grip, so grip no longer applies and showing or hiding your icon is up to you.
Events
onDraggerDoubleClick
onResizeStart
onResize
onResizeEnd
onCollapse
Styling
classNames and styles take the same keys. Use them before a descendant selector. Your classNames.dragger is merged with the kit's classes, and yours win when they conflict.
1
<Splitter
2
classNames={{
3
root: "…",
4
panel: "…",
5
dragger: {
6
default: "…",
7
active: "…",
8
},
9
}}
10
/>
A Tailwind class on one of these keys wins over the component's own styles without !important. Setting a component token's CSS variable on the root does nothing, so style the part instead.
API Reference
Splitter
Splitter's props. Rows marked antuikit in the Version column are added by the kit.