Stack

Reference

Props

direction: "vertical" | "horizontal" | "row" | "column"
gap: SpacingToken | number — tokens: "ds-01".."ds-13", or numbers 0-13
align: "start" | "center" | "end" | "stretch" | "baseline"
justify: "start" | "center" | "end" | "between" | "around" | "evenly"
wrap: boolean
as: ElementType (default: "div")

Defaults

direction: "vertical"

Example

<Stack direction="horizontal" gap="ds-04" align="center">
  <Avatar size="sm" />
  <Text variant="body-md">User Name</Text>
</Stack>

Composability

• Server-safe layout primitive. Nothing to hydrate — works anywhere.
• Pattern: Stack wraps child elements in a flex container. Swap between vertical/horizontal without rewriting the child layout.
• Polymorphic via as: Use as="ul" / as="ol" for list semantics with flex styling; as="section" for major page divisions; etc.
• gap is design-system tokenized — use token strings ("ds-04") or numeric shortcuts (4 → "ds-04"). Raw numbers map 1:1 to the ds-0N token set.
• Responsive direction: Not built in — for responsive direction changes use Tailwind's flex-col md:flex-row directly on a plain div, or wrap multiple Stacks with display-toggling.
• Container vs Stack: Container centers + caps width; Stack arranges children. Compose them: <Container><Stack>...</Stack></Container>.

Gotchas

• "row" and "column" are aliases for "horizontal" and "vertical"
• gap accepts both token strings and numeric values

Changes

v0.2.0

• Added direction prop now accepts "row" / "column" as aliases for "horizontal" / "vertical"
• Added gap prop now accepts numeric values (e.g., gap={4} -> gap-ds-04) in addition to token strings

v0.1.1

• Fixed Replaced dynamic gap-${N} with static lookup map (Tailwind JIT safety)

v0.1.0

• Added Initial release