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

#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.