Stack

Stack is a layout component that makes it easy to stack elements together and apply a space between them. By default, it renders a Box element.

Import#

import { Stack } from "pearl-ui";

Usage#

<Stack direction="horizontal" spacing="m">  <Box w={20} h={20} backgroundColor="primary.500" />  <Box w={20} h={20} backgroundColor="primary.500" />  <Box w={20} h={20} backgroundColor="primary.500" />  <Box w={20} h={20} backgroundColor="primary.500" /></Stack>

Stack direction#

Use the direction prop to change the direction of the stacking.

<Stack direction="horizontal" spacing="m">  <Box w={20} h={20} backgroundColor="primary.500" />  <Box w={20} h={20} backgroundColor="primary.500" /></Stack>
<Stack direction="vertical" spacing="s">  <Box w={20} h={20} backgroundColor="secondary.500" />  <Box w={20} h={20} backgroundColor="secondary.500" /></Stack>

Adding dividers#

In some scenarios, you may want to add dividers between the stacked elements. This can be done by passing the Divider(or any custom React element) to the divider prop.

import { Divider } from 'pearl-ui'
<Stack direction="horizontal" spacing="s" divider={<Divider />}>  <Box w={20} h={20} backgroundColor="primary.500" />  <Box w={20} h={20} backgroundColor="primary.500" /></Stack>
<Stack direction="vertical" spacing="s" divider={<Divider bg="cyan" />}>  <Box w={20} h={20} backgroundColor="secondary.500" />  <Box w={20} h={20} backgroundColor="secondary.500" /></Stack>

Example#

Light
Dark

Embed not loading? Click here

Props#

Supported style props#

Stack composes Box so you can pass all Box related props.

Additional props#

Name	Required	Type	Description
direction	true	"horizontal" \| "vertical"	The direction to stack the items.
spacing	false	PearlTheme["spacing"]	The spacing between the elements.
divider	false	React.ReactElement	If specified, each stack item will show the provided divider.