Space installs into your project as a file you own. It takes the same props as Ant Design's Space and adds no behavior or styling. className is merged through cn().
Space.Compact comes with the same import and does the opposite job, covered below. Space.Addon is not re-exported. Take it from antd when a compact row needs a custom cell.
Install
npx antuikit@latest init
npx antuikit@latest add space
The first command sets up AntuikitProvider and the theme tokens, and the second adds Space.
Import
Import from @/components/ui/space, not from antd. Once installed, the file lives in your project.
import { Space } from "@/components/ui/space"
The axes
Three props set the gap, the direction and the cross-axis alignment.
size takes small, medium, large, a number, or a [horizontal, vertical] pair of either. It defaults to small. The presets follow the theme and match Flex's gap presets, and a number stays fixed.
orientation takes horizontal (the default) or vertical. direction is the old name and logs a warning.
align takes start, end, center or baseline, and a horizontal Space defaults to center. baseline lines up text of mixed sizes.
vertical is a shorthand for orientation="vertical", and orientation wins when both are set. Pick one spelling for your codebase.
wrap lets a horizontal run flow onto more rows instead of overflowing. One size then sets both the gap along a row and between rows, so pass a pair to keep the rows closer.
1
<Space wrap size={[16, 8]} className="max-w-96">
2
{tags}
3
</Space>
Slots
One slot.
separator takes any node and renders it between items, never at the ends. split is the old name and logs a warning.
Space puts every child in an item element of its own, which is where the separator goes. It also means flex: 1 on a child does nothing. Use Flex when a child has to grow.
A null or false child is skipped and takes no separator slot.
It works with the kit's buttons, inputs and selects. A plain <div> inside is not joined.
size here sets the size of the controls inside, not a gap. block stretches the group to its container's width.
Vertical compact is supported for buttons only.
Space.Compact has nothing to do with compact mode. Compact mode is a theme setting that makes the whole page denser.
Events
Space has no event props of its own. DOM handlers you pass land on its root element.
Styling
classNames and styles take the keys root, item and separator. Use them before a descendant selector. A Tailwind class on one of these keys wins over the component's own styles without !important.
1
<Space
2
classNames={{
3
root: "…",
4
item: "…",
5
separator: "…",
6
}}
7
/>
API Reference
Space
Space's props. Rows marked antuikit in the Version column are added by the kit.
Space.Compact
Space.Compact's props. Rows marked antuikit in the Version column are added by the kit.
Space.Addon
Space.Addon's props. The kit does not re-export it.