Stack

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

Import#

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

Usage#

1
2
3
Editable Example

With direction#

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

1
2
3
Editable Example

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.

Editable Example

Props#

NameTypeDefaultDescription
colbooleanSets the direction of the stack elements to column. composes of tailwindcss flex-col
rowbooleanSets the direction of the stack elements to row. composes of tailwindcss flex-row
spacingstring | numberThe space between each stack item. Defaults to 4. Composes of tailwindcss margin classes