Stack

Vertical flex container with token-driven gap, alignment, and `as` polymorphism.

npx visor add stack

Why Stack?

Stack is the token-typed replacement for flex flex-col gap-N Tailwind utility chains. The gap prop accepts only Visor spacing tokens (xs, sm, md, lg, xl, 2xl, 3xl) so spacing across an app stays consistent.

Default gap is "md" — the value of --spacing-4 (1rem).

Default Gap

One

Two

Three

Alignment

<Stack gap="md" align="center">
  <Box>centered horizontally</Box>
  <Box>centered horizontally</Box>
</Stack>

Responsive Gap

<Stack gap={{ base: "sm", md: "lg", xl: "2xl" }}>
  Tighter on mobile, breathier on desktop.
</Stack>

Polymorphic `as`

<Stack as="section" gap="lg">
  <h2>Heading</h2>
  <p>Body</p>
</Stack>

Installation

npx visor add stack

API Reference

StackProps

Prop	Type	Default	Description
`as`	`keyof React.JSX.IntrinsicElements`	`'div'`	HTML element to render.
`gap`	`StackSpacing \| ResponsiveProp<StackSpacing>`	`'md'`	Space between children. Token-named. Accepts a responsive { base, sm, md, lg, xl } map.
`align`	`'start' \| 'center' \| 'end' \| 'stretch'`	—	Cross-axis alignment (horizontal in a column flex).
`justify`	`'start' \| 'center' \| 'end' \| 'between' \| 'around' \| 'evenly'`	—	Main-axis alignment (vertical in a column flex).

The component also accepts all standard HTML attributes for the rendered element.

Stack

On this page