Back to Components

Layout

Spacer

Flex helper that fills remaining space. Drop one between two flex children to push them to opposite ends.

Examples

Push apart

Left Right
<div style="display:flex; align-items:center; gap:var(--uin-s-2);">
  <Badge>Left</Badge>
  <Spacer />
  <Badge variant="accent">Right</Badge>
</div>

Props

PropTypeDefaultDescription
classstringExtra classes; merged via cn().
...restHTMLAttributes<HTMLDivElement>Spread onto the underlying <div>.

Install

CLI

npx @a3tai/mittsu add spacer