Shorthand for alignItems
style prop
Stack
Stack is a layout component used to group elements together and apply a space between them.
Import#
import { Stack, HStack, VStack } from '@chakra-ui/react'
- VStack: used to stack elements in the vertical direction
- HStack: used to stack elements in the horizontal direction
- Stack: used to stack elements in the vertical or horizontal direction
Usage#
Stack uses a modified version of the CSS lobotomized owl selector to add spacing between its children.
To stack elements in horizontal or vertical direction only, use the HStack
or
VStack
components. You can also use the Stack
component as well and pass the
direction
prop.
<HStack spacing='24px'><Box w='40px' h='40px' bg='yellow.200'>1</Box><Box w='40px' h='40px' bg='tomato'>2</Box><Box w='40px' h='40px' bg='pink.100'>3</Box></HStack>
Responsive direction#
You can pass responsive values to the Stack
component to change stack
direction and/or spacing between elements.
<Stack direction={['column', 'row']} spacing='24px'><Box w='40px' h='40px' bg='yellow.200'>1</Box><Box w='40px' h='40px' bg='tomato'>2</Box><Box w='40px' h='40px' bg='pink.100'>3</Box></Stack>
Stack Dividers#
In some scenarios, you may want to add dividers between stacked elements. Pass
the divider
prop and set its value to the StackDivider
or any custom React
element.
<VStackdivider={<StackDivider borderColor='gray.200' />}spacing={4}align='stretch'><Box h='40px' bg='yellow.200'>1</Box><Box h='40px' bg='tomato'>2</Box><Box h='40px' bg='pink.100'>3</Box></VStack>
Stack items horizontally#
Pass the direction
and set it to row
. Optionally, you can use align
and
justify
to adjust the alignment and distribution of the items.
Feature Cards with Stack Component#
function Feature({ title, desc, ...rest }) {return (<Box p={5} shadow='md' borderWidth='1px' {...rest}><Heading fontSize='xl'>{title}</Heading><Text mt={4}>{desc}</Text></Box>)}function StackEx() {return (<Stack spacing={8} direction='row'><Featuretitle='Plan Money'desc='The future can be even brighter but a goal without a plan is just a wish'/><Featuretitle='Save Money'desc='You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process'/></Stack>)}render(<StackEx />)
Feature Cards with HStack Component#
In the example following, we can notice that for the HStack
component, we
don't need the direction props, since this component is specifically for
horizontally stacking items.
function Feature({ title, desc, ...rest }) {return (<Box p={5} shadow='md' borderWidth='1px' {...rest}><Heading fontSize='xl'>{title}</Heading><Text mt={4}>{desc}</Text></Box>)}function StackEx() {return (<HStack spacing={8}><Featuretitle='Plan Money'desc='The future can be even brighter but a goal without a plan is just a wish'/><Featuretitle='Save Money'desc='You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process'/></HStack>)}render(<StackEx />)
Notes on Stack vs Flex#
The Stack
component and the Flex
component have their children spaced out
evenly but the key difference is that the Stack
won't span the entire
width of the container whereas the Flex
will. Another thing to note is that
the items in both Stack
and Flex
are aligned in the center by default.
Props#
align
align
ResponsiveValue<AlignItems>
direction
direction
The direction to stack the items.
StackDirection
column
divider
divider
If true
, each stack item will show a divider
ReactElement<any, string | JSXElementConstructor<any>>
isInline
isInline
If true
the items will be stacked horizontally.
boolean
false
justify
justify
Shorthand for justifyContent
style prop
ResponsiveValue<JustifyContent>
shouldWrapChildren
shouldWrapChildren
If true
, the children will be wrapped in a Box
with
`display: inline-block`, and the Box
will take the spacing props
boolean
false
spacing
spacing
The space between each stack item
ResponsiveValue<string | number | (string & {})>
0.5rem
wrap
wrap
Shorthand for flexWrap
style prop
ResponsiveValue<FlexWrap>