Stack

Layout component used to group elements together and apply a space between them.

Based on the Stack component in Chakra-UI.

Component usage

import { Box, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack bg="lightGray" p="8px">
      <Box w="40px" h="40px" bg="yellow">
        1
      </Box>
      <Box w="40px" h="40px" bg="tomato">
        2
      </Box>
      <Box w="40px" h="40px" bg="pink">
        3
      </Box>
    </Stack>
  );
}

Direction

The direction property can be used to decide the contents direction in the stack. Defaults to column. Optionally, you can use align and justify to adjust the alignment and distribution of the items.

Spacing

The spacing property can be used to decide the spacing between items in the stack.

Margin

Margin can be set either by using the m property.

<Stack m="8px">
  <Box>1</Box>
  <Box>2</Box>
</Stack>

or more specifically with for example mr which will set margin right.

<Stack mr="8px">
  <Box>1</Box>
  <Box>2</Box>
</Stack>

Padding

Padding can be set either by using the p property.

<Stack p="8px">
  <Box>1</Box>
  <Box>2</Box>
</Stack>

or more specifically with for example pr which will set padding right.

<Stack pr="8px">
  <Box>1</Box>
  <Box>2</Box>
</Stack>

Dividers

In some scenarios, you may want to add dividers between stacked elements. Pass the divider prop and set its value to the Divider or any custom React element.

import { Box, Divider, Stack } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack divider={<Divider />}>
      <Box>1</Box>
      <Box>2</Box>
    </Stack>
  );
}