Skip to main content

Stack

A polymorphic component used for quickly creating stacked layouts.

http://localhost:3000
<Stack gap="medium">
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
</Stack>

Usage​

Orientation​

Set the orientation prop to adjust the layout of the stacks's children.

http://localhost:3000
<Stack gap="medium" orientation="horizontal">
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
</Stack>

Gap​

Set the gap prop to control the spacing between the stacks's children.

http://localhost:3000
<Stack gap="small" orientation="horizontal">
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
  <Box css={{ backgroundColor: '$background-secondary', size: '80px' }} />
</Stack>

Props​

as?The root element to be rendered