import { Stack } from '@chakra-ui/react'
import { DecorativeBox } from '../lib/decorative-box'
export const StackBasic = () => {
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 '../lib/decorative-box'
export const StackHorizontal = () => {
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 '../lib/decorative-box'
export const StackWithHstack = () => {
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 '../lib/decorative-box'
export const StackWithVstack = () => {
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 '../lib/decorative-box'
export const StackWithSeparator = () => {
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 '../lib/decorative-box'
export const StackWithResponsiveDirection = () => {
return (
<Stack direction={{ base: 'column', md: 'row' }} gap="10">
<DecorativeBox boxSize="20" />
<DecorativeBox boxSize="20" />
<DecorativeBox boxSize="20" />
</Stack>
)
}