Skip to content
Primitiv home
Framework
Consumption mode
Search the docs

Spacer

stableSource Figma

A flex: 1 0 0 blank element for pushing flex siblings apart — toolbar left/right groups, card footers, nav bars.

Playground

Density

Preview

Members
Invite
import { Spacer } from "@/components/ui/spacer";
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>  <strong>Members</strong>  <Spacer />  <button>Invite</button></div>

Density is set by a data-density ancestor — the Context system, not a Spacer prop.

Installation

npx primitiv add spacer

Import

import { Spacer } from "@/components/ui/spacer";

No headless primitive — this one ships only as a copied styled surface, so primitiv add is the only way in, whichever mode you are reading.

Props

Generated from the copied file’s props type and contract.json. Never hand-maintained.

Spacer

Extends HTMLDivElement — every native attribute of that element is accepted and forwarded.

No props of its own.

Styling contract

0 CSS custom properties on .primitiv-spacer — mode-agnostic. These names are the stable surface; the values are not.

Accessibility

  • Spacer defaults to aria-hidden="true" — it is a blank layout element with no content, so it is correctly absent from the accessibility tree. Pass aria-hidden={false} only if you have given it a role and content, which is not its intended use.
  • It carries no focusable behaviour and no semantics: it is a spacing device, so a screen reader passes straight over it to the real controls on either side.
  • It only does anything inside a flex container — flex: 1 0 0 needs a flex parent to grow into. In a block or grid context it collapses to nothing, which is a layout no-op rather than an accessibility problem.

Examples

Every example below reacts to the density control. Currently showing Styled mode.

Push two groups apart

The core use: one Spacer between two groups in a flex row soaks up all the free space, so the first group sits at the start and the second at the end. It is flex: 1 0 0 — a blank, flexible element — which is exactly what a justify="between" cannot do once you have three groups that should not spread evenly.

Density
Project Atlas
Share
Settings
import { Spacer } from "@/components/ui/spacer";
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>  <strong>Project Atlas</strong>  <Spacer />  <button>Share</button>  <button>Settings</button></div>

Isolate the middle group

Two Spacers, one on each side of a group, centre that group while the outer items stay pinned to the edges — a navbar with a brand on the left, nav in the middle, and actions on the right. Equal Spacers share the leftover space equally, which justify alone cannot express when the groups are different widths.

Density
Primitiv
Docs · Components
Sign in
import { Spacer } from "@/components/ui/spacer";
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>  <strong>Primitiv</strong>  <Spacer />  <nav>Docs · Components</nav>  <Spacer />  <button>Sign in</button></div>