Back to Components

Layout

VStack

Naming-symmetric twin of HStack. Functionally identical to Stack — pick whichever convention reads better in your code.

Examples

Default

One Two Three
<VStack gap={3}>
  <Badge>One</Badge>
  <Badge>Two</Badge>
  <Badge variant="accent">Three</Badge>
</VStack>

Props

PropTypeDefaultDescription
gap0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 82Maps to 0 or spacing tokens.
align'start' | 'center' | 'end' | 'stretch''stretch'align-items value.
justify'start' | 'center' | 'end' | 'between''start'justify-content value.

Install

CLI

npx @a3tai/mittsu add vstack