Stack
Used to layout its children in a vertical or horizontal stack.
AI TipWant to skip the docs? Use the MCP Server
import { Stack } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Stack> <DecorativeBox h="20" /> <DecorativeBox h="20" /> <DecorativeBox h="20" /> </Stack> ) } Usage
By default, Stack applies flex-direction: column and gap: 8px to its children.
import { HStack, Stack, VStack } from "@chakra-ui/react"<Stack> <div /> <div /> </Stack>Examples
Horizontal
Use the direction prop to change the direction of the stack.
import { Stack } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Stack direction="row" h="20"> <DecorativeBox /> <DecorativeBox /> <DecorativeBox /> </Stack> ) } HStack
Alternatively, you can use the HStack to create a horizontal stack and align its children horizontally.
import { HStack } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <HStack> <DecorativeBox h="10" /> <DecorativeBox h="5" /> <DecorativeBox h="20" /> </HStack> ) } VStack
Use the VStack to create a vertical stack and align its children vertically.
import { VStack } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <VStack> <DecorativeBox w="50%" h="20" /> <DecorativeBox w="25%" h="20" /> <DecorativeBox w="100%" h="20" /> </VStack> ) } Separator
Use the separator prop to add a separator between the stack items.
import { Stack, StackSeparator } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Stack separator={<StackSeparator />}> <DecorativeBox h="20" /> <DecorativeBox h="20" /> <DecorativeBox h="20" /> </Stack> ) } Responsive Direction
Use the direction prop to change the direction of the stack responsively.
import { Stack } from "@chakra-ui/react" import { DecorativeBox } from "compositions/lib/decorative-box" const Demo = () => { return ( <Stack direction={{ base: "column", md: "row" }} gap="10"> <DecorativeBox boxSize="20" /> <DecorativeBox boxSize="20" /> <DecorativeBox boxSize="20" /> </Stack> ) }