Stack

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the Flex component.

Import#

import { Stack } from "@chakra-ui/core";

import { Stack } from "@chakra-ui/core";

By default, each item is stacked vertically. Stack clones it's children and passes the spacing to them using margin-bottom or margin-right.

Usage#

Plan Money

The future can be even brighter but a goal without a plan is just a wish

Save Money

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

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}>
      <Feature
        title="Plan Money"
        desc="The future can be even brighter but a goal without a plan is just a wish"
      />
      <Feature
        title="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 />);

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}>
      <Feature
        title="Plan Money"
        desc="The future can be even brighter but a goal without a plan is just a wish"
      />
      <Feature
        title="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 />);

Editable Example

Stack items horizontally#

Pass the isInline prop or direction and set it to row.

Optionally, you can use align and justify to adjust the alignment and distribution of the items.

Plan Money

The future can be even brighter but a goal without a plan is just a wish

Save Money

You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings.

function Feature({ title, desc, ...rest }) {
  return (
    <Box p={5} shadow="md" borderWidth="1px" flex="1" rounded="md" {...rest}>
      <Heading fontSize="xl">{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  );
}

function StackEx() {
  return (
    <Stack isInline spacing={8} align="center">
      <Feature
        title="Plan Money"
        desc="The future can be even brighter but a goal without a plan is just a wish"
      />
      <Feature
        title="Save Money"
        desc="You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings."
      />
    </Stack>
  );
}

render(<StackEx />);

function Feature({ title, desc, ...rest }) {
  return (
    <Box p={5} shadow="md" borderWidth="1px" flex="1" rounded="md" {...rest}>
      <Heading fontSize="xl">{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  );
}
function StackEx() {
  return (
    <Stack isInline spacing={8} align="center">
      <Feature
        title="Plan Money"
        desc="The future can be even brighter but a goal without a plan is just a wish"
      />
      <Feature
        title="Save Money"
        desc="You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings."
      />
    </Stack>
  );
}
render(<StackEx />);

Editable Example

Reverse display order of items#

Pass the isReversed prop or set direction to row-reverse or column-reverse.

Plan Money

The future can be even brighter but a goal without a plan is just a wish

Save Money

You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings.

function Feature({ title, desc, ...rest }) {
  return (
    <Box p={5} shadow="md" borderWidth="1px" flex="1" rounded="md" {...rest}>
      <Heading fontSize="xl">{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  );
}

function StackEx() {
  return (
    <Stack isReversed spacing={8} align="center">
      <Feature
        title="Plan Money"
        desc="The future can be even brighter but a goal without a plan is just a wish"
      />
      <Feature
        title="Save Money"
        desc="You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings."
      />
    </Stack>
  );
}

render(<StackEx />);

function Feature({ title, desc, ...rest }) {
  return (
    <Box p={5} shadow="md" borderWidth="1px" flex="1" rounded="md" {...rest}>
      <Heading fontSize="xl">{title}</Heading>
      <Text mt={4}>{desc}</Text>
    </Box>
  );
}
function StackEx() {
  return (
    <Stack isReversed spacing={8} align="center">
      <Feature
        title="Plan Money"
        desc="The future can be even brighter but a goal without a plan is just a wish"
      />
      <Feature
        title="Save Money"
        desc="You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings."
      />
    </Stack>
  );
}
render(<StackEx />);

Editable Example

Props#

Name	Type	Default	Description
`isInline`	`boolean`	false	If `true` the items will be stacked horizontally.
`isReversed`	`boolean`	false	If `true` the items will be displayed in reverse order.
`direction`	`FlexProps["flexDirection"]`		The direction to stack the items.
`children`	`React.ReactNode`		The content of the stack.
`spacing`	`StyledSystem.MarginProps`		The space between each stack item
`align`	`FlexProps["alignItems"]`		The alignment of the stack item. Similar to `align-items`
`justify`	`FlexProps["justifyContent"]`		The distribution of the stack item. Similar to `justify-content`
`shouldWrapChildren`	`boolean`		If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props

Proudly made in 🇳🇬

Released under the MIT License.

Stack

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Plan Money

Save Money

Stack items horizontally#

Plan Money

Save Money

Reverse display order of items#

Plan Money

Save Money

Props#

Import#