Layout

Space

A flex-based spacing utility that adds consistent gaps between inline elements. Includes Space.Compact for grouping elements without gaps — perfect for button groups and input addons.

Horizontal · size=middle

With split separator

Link 1|Link 2|Link 3

Space.Compact — grouped buttons

Wrap + large gap

React

Next.js

Tailwind

TypeScript

Framer Motion

Installation

npx benflux-ui add space

Vertical layout

<Space direction="vertical" size="large">
  <Input placeholder="Username" />
  <Input placeholder="Password" type="password" />
  <Button className="w-full">Sign In</Button>
</Space>

Wrapping

<Space wrap size={[8, 12]}>
  {tags.map((tag) => <Badge key={tag}>{tag}</Badge>)}
</Space>

Props — Space

Prop	Type	Default	Description
size	"small" \| "middle" \| "large" \| number \| [x, y]	"small"	Gap between items. Pass a tuple for separate horizontal/vertical gaps.
direction	"horizontal" \| "vertical"	"horizontal"	Flex direction
align	"start" \| "end" \| "center" \| "baseline"	—	Cross-axis alignment
wrap	boolean	false	Allow items to wrap to the next line
split	ReactNode	—	Separator element between each item

Props — Space.Compact

Prop	Type	Default	Description
direction	"horizontal" \| "vertical"	"horizontal"	Group direction
block	boolean	false	Stretch to full width