VStack

VStack arranges children vertically with token-backed gaps, alignment, wrapping, and semantic element support.

By default, VStack uses align="center", justify="start", and gap={8}.

#Default usage

<VStack gap={12}>
  <Card><CardContent>Workspace settings</CardContent></Card>
  <Card><CardContent>Billing summary</CardContent></Card>
  <Card><CardContent>Team access</CardContent></Card>
</VStack>

#Import

import { Button, VStack } from "@froggdesign/enter-ui-react";

#Alignment

#Density

#Dashboard layout

The default alignment is center, not stretch. This can make a child Grid shrink to its intrinsic width and display a single column even on desktop. Use align="stretch" for page content. fullWidth changes the stack's own width; it does not stretch its children.

<VStack align="stretch" gap={24}>
  <Grid min={180} gap={16}>
    <MetricCard label="Open" value={12} />
    <MetricCard label="In review" value={4} />
    <MetricCard label="Resolved" value={8} />
  </Grid>
</VStack>

Import VStack, Grid, and MetricCard from @froggdesign/enter-ui-react.

#Patterns

#Accessibility

VStack is layout-only. Pick the as element for document meaning, and keep semantic children inside the stack.

#API

• as: div, section, article, main, aside, nav, header, or footer.
• gap: 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 40, or 48.
• align: start, center, end, or stretch.
• justify: start, center, end, or between.
• wrap: enables flex wrapping.
• fullWidth: sets width to 100%.
• top, right, bottom, left: external spacing (margin).
• padding, paddingTop, paddingRight, paddingBottom, paddingLeft: internal spacing.
• Extends native props for the rendered element and supports className.

#Spacing

<VStack top={8} left={20} paddingBottom={10} gap={10}>
  <Text>Control row</Text>
  <Badge>Token-backed spacing</Badge>
</VStack>

#Styling

VStack uses .eui-vstack with data attributes for gap, align, justify, wrap, and full-width behavior. Gaps map to EnterUI spacing variables with small fallbacks for intermediate values.