Stack

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

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

Also inspired by Chakra UI.

Copy
import { Stack } from 'minerva-ui';

Usage#

Item 1
Item 2
Item 3
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#

Item 1
Item 2
Item 3
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#

Item 1
Item 2
Item 3
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.