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.