Stack

Usage

Stack is a vertical flex container. If you need a horizontal flex container, use Group component instead. If you need to have full control over flex container properties, use Flex component.

import { Stack, Button } from '@mantine/core';
function Demo() {
  return (
    <Stack
      h={300}
      bg="var(--mantine-color-blue-light)"

    >
      <Button variant="default">1</Button>
      <Button variant="default">2</Button>
      <Button variant="default">3</Button>
    </Stack>
  );
}

Browser support

Stack uses flexbox gap to add spacing between children. In older browsers, Stack children may not have spacing. You can install PostCSS flex-gap-polyfill to add support for older browsers.