VStack

VStack is a convenience wrapper around Stack with a fixed vertical (column) direction. Use it for vertical layouts.

Import

import { VStack } from "@tosui/react";

Basic Usage

Code

<VStack gap={4}>
  <Box p={4} bg="primary-subtle">Item 1</Box>
  <Box p={4} bg="accent-subtle">Item 2</Box>
  <Box p={4} bg="success-subtle">Item 3</Box>
</VStack>

Preview

Item 1

Item 2

Item 3

Alignment

Code

<VStack gap={4} align="center" p={4} bg="surface" border="thin" borderColor="border">
  <Box p={4} bg="primary-subtle" w="200px">Centered</Box>
  <Box p={4} bg="accent-subtle" w="150px">Items</Box>
  <Box p={4} bg="success-subtle" w="100px">Here</Box>
</VStack>

Preview

Centered

Items

Here

Common Patterns

Form Layout

<VStack gap={4} align="stretch">
  <Input placeholder="Name" />
  <Input placeholder="Email" />
  <Textarea placeholder="Message" />
  <Button>Submit</Button>
</VStack>

Card Content

<Card>
  <CardBody>
    <VStack gap={3} align="flex-start">
      <Heading fontSize="xl">Card Title</Heading>
      <Text color="foreground-muted">Card description goes here.</Text>
      <Button size="sm">Learn More</Button>
    </VStack>
  </CardBody>
</Card>

Props Reference

All convenience props (align, justify, wrap) accept responsive objects in addition to simple values.

Prop	Type	Default	Description
gap	ResponsiveValue<0-32>	-	Gap between children (spacing multiplier)
align	ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">	-	Cross-axis alignment
justify	ResponsiveValue<"start" | "center" | "end" | "space-between" | "space-around" | "space-evenly">	-	Main-axis alignment
wrap	ResponsiveValue<boolean>	false	Enable flex wrapping
as	ElementType	"div"	HTML element to render

VStack accepts all Stack props except direction.

TypeScript

import { VStack, type VStackProps, type VStackOwnProps } from "@tosui/react";