Stack

<Stack /> is a wrapper component that adds margins between child components using this hack:

/* adds margin between all immediate child elements that are adjacent */
.stack > * + * {
  margin-top: 1.5rem;
}

Also inspired by Chakra UI.

import { Stack } from 'minerva-ui'

Usage

Preview

Item 1

Item 2

Item 3

Source

const Card = ({ children }) => ( <Box borderRadius="md" borderWidth="1px" borderStyle="solid" px={6} py={4} maxWidth="300px" > <Text>{children}</Text> </Box> ); render( <Stack> <Card>Item 1</Card> <Card>Item 2</Card> <Card>Item 3</Card> </Stack> )

const Card = ({ children }) => (
  <Box
    borderRadius="md"
    borderWidth="1px"
    borderStyle="solid"
    px={6}
    py={4}
    maxWidth="300px"
  >
    <Text>{children}</Text>
  </Box>
);
render(
  <Stack>
    <Card>Item 1</Card>
    <Card>Item 2</Card>
    <Card>Item 3</Card>
  </Stack>
)

Horizontal Stack

Preview

Item 1

Item 2

Item 3

Source

const Card = ({ children }) => ( <Box borderRadius="md" borderWidth="1px" borderStyle="solid" px={6} py={4} maxWidth="300px" > <Text>{children}</Text> </Box> ); render( <Stack horizontal> <Card>Item 1</Card> <Card>Item 2</Card> <Card>Item 3</Card> </Stack> )

const Card = ({ children }) => (
  <Box
    borderRadius="md"
    borderWidth="1px"
    borderStyle="solid"
    px={6}
    py={4}
    maxWidth="300px"
  >
    <Text>{children}</Text>
  </Box>
);
render(
  <Stack horizontal>
    <Card>Item 1</Card>
    <Card>Item 2</Card>
    <Card>Item 3</Card>
  </Stack>
)

Custom Gap

Preview

Item 1

Item 2

Item 3

Source

const Card = ({ children }) => ( <Box borderRadius="md" borderWidth="1px" borderStyle="solid" px={6} py={4} maxWidth="300px" > <Text>{children}</Text> </Box> ); render( <Stack gap="30px"> <Card>Item 1</Card> <Card>Item 2</Card> <Card>Item 3</Card> </Stack> )

const Card = ({ children }) => (
  <Box
    borderRadius="md"
    borderWidth="1px"
    borderStyle="solid"
    px={6}
    py={4}
    maxWidth="300px"
  >
    <Text>{children}</Text>
  </Box>
);
render(
  <Stack gap="30px">
    <Card>Item 1</Card>
    <Card>Item 2</Card>
    <Card>Item 3</Card>
  </Stack>
)

Props

These are props related to the Stack component.

Name	Type	Is Required	Default	Description
gap	string	optional	10px	Space between items in stack
horizontal	boolean	optional	false	Change stack direction to horizontal