Spacer

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Spacer } from "@tessinaui/ui";

{/* Fixed horizontal gap between inline elements */}
<div className="flex items-center">
  <span>Hello</span>
  <Spacer axis="horizontal" size="md" />
  <span>World</span>
</div>

{/* Fixed vertical gap between blocks */}
<div className="flex flex-col">
  <h2>Title</h2>
  <Spacer axis="vertical" size="lg" />
  <p>Body</p>
</div>

{/* Push apart — grow fills remaining space */}
<header className="flex items-center">
  <Logo />
  <Spacer grow />
  <UserMenu />
</header>

{/* Navbar with grouped left/right clusters */}
<nav className="flex items-center gap-2">
  <Logo />
  <NavLink>Home</NavLink>
  <NavLink>Docs</NavLink>
  <Spacer grow />
  <Button variant="ghost">Sign in</Button>
  <Button>Sign up</Button>
</nav>

Examples

Default

A fixed horizontal gap between two inline elements.

Horizontal Sizes

The seven fixed sizes from xs to 3xl applied as width in a row.

Vertical Stack

With axis="vertical" the Spacer applies a fixed height between stacked blocks.

Grow

grow fills the remaining space, pushing siblings apart — the canonical navbar pattern.

Polymorphic Render

render swaps the default <div> for any element, here a vertical rule.

Axis

In a horizontal flex container use axis="horizontal"; in a column stack use axis="vertical"; inside grids, axis="both" keeps the Spacer square.

Size

Grow

<Spacer grow />

When grow is true, the Spacer adds flex-grow: 1. In a flex parent this makes the Spacer fill all remaining space — the canonical "push apart" pattern for toolbars and navigation. When grow is false (the default), the Spacer's size is strictly the size prop.

grow and size can be combined: grow takes precedence in a flex parent, but the size still applies when the parent has enough room to honour it.

Polymorphic render

Replace the default <div> with any element.

<Spacer render={<hr />} axis="vertical" size="xl" />

Accessibility

Spacer sets aria-hidden="true" by default — screen readers skip it entirely. If you need the element to be perceivable (e.g. for demonstration or a decorative element with meaning), pass aria-hidden={false}.

For semantic separation between sections, prefer Divider — it's a proper <hr> with ARIA support.

When to use Spacer vs. gap vs. Divider

In most cases prefer gap on the parent — it's terser and avoids extra DOM nodes. Reach for Spacer when the spacing is uneven or when you need the grow behaviour.

API Reference

Spacer Props

Notes

• No intrinsic margin. Spacer doesn't push its siblings via margin — it takes its own space in the layout.
• No hooks. Pure wrapper, safe for SSR.
• Combining with gap. Using Spacer inside a flex container that already has a gap works, but the final gap between siblings is gap + Spacer size. If that's unexpected, drop the gap or set the Spacer to size="none" + grow.