# antuikit / Space

> Space, with `Space.Compact` attached. Adds nothing beyond `className` merging through `cn()`.

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

## Install

npx antuikit@latest init
npx antuikit@latest add space

## Import

import { Space } from "@/components/ui/space";

## Demos

- [Basic](https://ui.antuikit.com/embed/space/basic.md): Wrap any mix of nodes in `Space` to set them in a row with an even gap, like two buttons, a `Tag` and a line of text.
- [Size](https://ui.antuikit.com/embed/space/size.md): Set `size` to `small`, `medium` or `large` for a gap that follows the theme, or pass a number such as `40` for a fixed gap.
- [Vertical](https://ui.antuikit.com/embed/space/vertical.md): Pass `orientation="vertical"`, or the `vertical` shorthand, to stack the children in a column instead of a row.
- [Align](https://ui.antuikit.com/embed/space/align.md): Set `align` to `start`, `center`, `end` or `baseline` to line up children of different heights, like an avatar beside a name, a `Tag` and a small button.
- [Wrap](https://ui.antuikit.com/embed/space/wrap.md): Add `wrap` to let the items flow onto new rows, and pass `size` a `[horizontal, vertical]` pair for a smaller gap between rows.
- [Separator](https://ui.antuikit.com/embed/space/separator.md): Pass `separator` to put a node between each child, like a vertical `Divider` between links or a `·` between metadata.
- [Compact form controls](https://ui.antuikit.com/embed/space/compact-form.md): The same protocol `Select`, URL `Input` and search button, first as separate controls and then wrapped in `Space.Compact`, which joins them into one control with shared borders.
- [Compact buttons](https://ui.antuikit.com/embed/space/compact-buttons.md): Wrap buttons in `Space.Compact` to join them into one segmented set with shared borders, and add `block` with `flex-1` on each button to stretch the set across its row.
- [Vertical compact](https://ui.antuikit.com/embed/space/compact-vertical.md): Set `orientation="vertical"` on `Space.Compact` to stack joined buttons into one column with shared borders.
- [Space vs Flex](https://ui.antuikit.com/embed/space/vs-flex.md): In `Space` each child sits in its own item, so `flex-1` on the first button does nothing, while the same button in `Flex` grows to fill the row.
- [Image toolbar](https://ui.antuikit.com/embed/space/toolbar-groups.md): An image viewer toolbar on a dark pill, with edit, zoom and share groups split by a `Divider` through `separator`.

## 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/space`, 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-*)`.
- `Space` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.