Layout

Stack

A flexbox layout primitive for spacing children consistently — the workhorse for arranging every other component.

Stack

Preview

One

Two

Three

Usage

tsx

import { Stack, Button } from "@vesture/react";

<Stack direction="row" gap="sm" align="center" wrap>
  <Button>One</Button>
  <Button variant="secondary">Two</Button>
</Stack>

Props

Prop	Type	Default	Description
direction	"row" \| "column"	"column"	Flex direction.
align	"start" \| "center" \| "end" \| "stretch"	"stretch"	align-items.
justify	"start" \| "center" \| "end" \| "between"	"start"	justify-content.
gap	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	"md"	Token-based gap size.
wrap	boolean	false	Enables flex-wrap.
...rest	HTMLAttributes<HTMLDivElement>	—	Spread onto the root <div>.