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

Item 1

Item 2

Item 3

Horizontal Stack

Item 1

Item 2

Item 3

Custom Gap

Item 1

Item 2

Item 3

Props

These are props related to the Stack component.

NameTypeIs RequiredDefaultDescription
gapstringoptional10pxSpace between items in stack
horizontalbooleanoptionalfalseChange stack direction to horizontal