Hex UIv1

Stack

Vertical flex flow with token-bound gap. The headless equivalent of `<div className="flex flex-col gap-X">` with consistent spacing scale.

Form fields

Centered hero column

Centered title

A short subtitle here.

Vertical action stack — push to bottom with justify="end"

Installation

pnpm
pnpm dlx @hex-core/cli add stack

Centered hero

Center children horizontally for a centered call-to-action stack.

tsx
<Stack gap="md" align="center">
  <h1>Title</h1>
  <p>Subtitle</p>
  <Button>Get started</Button>
</Stack>

Form sections in a Card

Render CardHeader / CardContent / CardFooter directly inside Card (the canonical layout — pt-0 flow on each segment handles the rhythm). Inside CardContent, use Stack with sm gap to group label + control pairs.

tsx
<Card>
  <CardHeader>
    <CardTitle>Invite teammates</CardTitle>
    <CardDescription>Send up to 5 invites at a time.</CardDescription>
  </CardHeader>
  <CardContent>
    <Stack gap="sm">
      <Label htmlFor="emails">Emails</Label>
      <Textarea id="emails" placeholder="alice@acme.com, ben@acme.com" rows={3} />
    </Stack>
  </CardContent>
  <CardFooter className="justify-end gap-2">
    <Button variant="ghost">Cancel</Button>
    <Button>Send invites</Button>
  </CardFooter>
</Card>

Variant values

gapVertical gap between children, bound to `--gap-*` tokens.
xs
A
B
C
sm
A
B
C
md
A
B
C
lg
A
B
C
xl
A
B
C
ValueDescription
xs
0.25rem — barely-there spacing.
sm
0.5rem — tight grouping.
mddefault
1rem — default; standard rhythm.
lg
1.5rem — section-level spacing.
xl
2rem — major separation.
alignCross-axis alignment (CSS `align-items`).
start
A
B
C
center
A
B
C
end
A
B
C
stretch
A
B
C
ValueDescription
start
Children align to left edge.
center
Children center horizontally.
end
Children align to right edge.
stretchdefault
Default — children fill container width.
justifyMain-axis distribution (CSS `justify-content`).
start
A
B
center
A
B
end
A
B
between
A
B
ValueDescription
startdefault
Default — children pack to top.
center
Children center vertically.
end
Children pack to bottom.
between
First child to top, last to bottom, even distribution.

API Reference

PropTypeDefaultDescription
gap
"xs" | "sm" | "md" | "lg" | "xl"mdVertical spacing between children, bound to `--gap-*` tokens.
align
"start" | "center" | "end" | "stretch"stretchCross-axis alignment (CSS `align-items`).
justify
"start" | "center" | "end" | "between"startMain-axis distribution (CSS `justify-content`).

AI Guidance

When to use

Use anywhere you'd write `flex flex-col gap-X`. Default for vertical lists of dissimilar items (label + input + helper text), section bodies, sidebar items, button groups stacked vertically.

When not to use

Don't use for tabular data — use `<table>` or DataTable. Don't use for grid-like layouts — use `Grid`. Don't reach for `Stack` when a single child needs no spacing — just render the child.

Common mistakes

  • Setting `gap="md"` then adding `mt-*` / `space-y-*` on individual children — pick one spacing system
  • Using `align="center"` and wondering why children expand to full width — that's the `stretch` default for cross-axis
  • Nesting Stack inside Stack with the same gap when one Stack with two children would suffice

Accessibility

Stack is presentational. Wrap stacked navigation links in a `<nav>`, stacked form fields in a `<form>`, etc. — Stack does not contribute landmark semantics.

Related components

Token budget: 250

Verified against @hex-core/components@1.12.0

Edit this page on GitHub