Stack

Compose elements and components in vertical flex container
Import

Usage

Spacing
xs
sm
md
lg
xl
import { Stack, Button } from '@mantine/core';
function Demo() {
return (
<Stack sx={(theme) => ({ backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.colors.gray[0], height: 300 })}>
<Button variant="outline">1</Button>
<Button variant="outline">2</Button>
<Button variant="outline">3</Button>
</Stack>
);
}

Browser support

Stack uses flexbox gap to add spacing between children. In older browsers Stack children will not have spacing.

Stack component props

NameTypeDescription
align
AlignItems
align-items CSS property
justify
JustifyContent
justify-content CSS property
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.spacing or number to set gap in px