Spacer - EnterUI

Layout UtilitiesUpdated 6 May 2026

Spacer is useful when you want one child to push sibling content apart in a flex-based row or stack while preserving layout semantics.

#Default usage

Start

End

<HStack align="center" fullWidth gap={8}>
  <Card><CardContent>Start</CardContent></Card>
  <Spacer />
  <Card><CardContent>End</CardContent></Card>
</HStack>

#Import

import { Spacer } from "@froggdesign/enter-ui-react";

#Accessibility

Spacer is layout-only and has no semantic meaning by itself. Keep actual content semantics in child elements and use proper landmarks or labels on real content containers.

#API

size (optional): number or CSS size, used as flex-basis.
Extends standard div props.
className and style are forwarded.

#Styling

Spacer uses the .eui-spacer class and applies flex: 1 1 auto so it can grow inside flex containers. Use it alongside gap controls on stack primitives or regular flex layouts.