Stack

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

Import#

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

Usage#

<Stack col>
  <Box size="40px" className="bg-gray-200 p-4 border border-solid">
    1
  </Box>
  <Box size="40px" className="bg-purple-400 p-4 border border-solid">
    2
  </Box>
  <Box size="40px" className="bg-orange-400 p-4 border border-solid">
    3
  </Box>
</Stack>

With direction#

Stack accepts either row or col in the direction prop to changes it's direction to vertical or horizontal.

<Stack row>
  <Box size="40px" className="bg-blue-200 p-2 border border-solid">
    1
  </Box>
  <Box size="40px" className="bg-purple-400 p-2 border border-solid">
    2
  </Box>
  <Box size="40px" className="bg-orange-400 p-2 border border-solid">
    3
  </Box>
</Stack>

spacing#

Stack accepts a spacing prop with a valid css value. This prop adds a margin to each child of the Stack element except for the last child.

<Stack col spacing="1rem">
  <Alert variant="solid" status="success" alertTitle="Download">
    Successful!
  </Alert>
  <Alert variant="solid" status="error" alertTitle="Download">
    Failed!
  </Alert>
  <Alert variant="solid" status="warning" alertTitle="Download">
    Pending!
  </Alert>
</Stack>

Props#

Name	Type	Description
`col`	`boolean`	Sets the direction of the stack elements to column. composes of tailwindcss `flex-col`
`row`	`boolean`	Sets the direction of the stack elements to row. composes of tailwindcss `flex-row`
`spacing`	`string` \| `number`	The space between each stack item. Defaults to `4`. Composes of tailwindcss margin classes