react mantine stack component example

React Mantine Stack Component Example

updated 20/01/23 By frontendshape

In this tutorial, we will see how to use stack component in react mantine core. We will create stack component with button, stack component with flex, stack component with sizes using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13


1. react mantine stack deafult component.

import { Button, Stack, Container } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container size="xs">
        <Stack>
          <Button variant="outline">Stack 1</Button>
          <Button variant="outline">Stack 2</Button>
          <Button variant="outline">Stack 3</Button>
        </Stack>
      </Container>
    </>
  );
}
react mantine  stack deafult

react mantine stack deafult


2. react mantine stack small size, medium size and large size component.

import { Button, Stack, Container } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container size="xs">
        <Stack spacing="sm">
          <Button variant="outline">Stack 1</Button>
          <Button variant="outline">Stack 2</Button>
          <Button variant="outline">Stack 3</Button>
        </Stack>
        <Stack spacing="md">
          <Button variant="outline">Stack 1</Button>
          <Button variant="outline">Stack 2</Button>
          <Button variant="outline">Stack 3</Button>
        </Stack>
        <Stack spacing="lg">
          <Button variant="outline">Stack 1</Button>
          <Button variant="outline">Stack 2</Button>
          <Button variant="outline">Stack 3</Button>
        </Stack>
        <Stack spacing="xl">
          <Button variant="outline">Stack 1</Button>
          <Button variant="outline">Stack 2</Button>
          <Button variant="outline">Stack 3</Button>
        </Stack>
      </Container>
    </>
  );
}


3. react mantine stack component with flex and align.

import { Button, Stack, Container } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container size="xs">
        <Stack
          justify="space-between"
          align="center"
          sx={(theme) => ({
            backgroundColor:
              theme.colorScheme === 'dark'
                ? theme.colors.dark[8]
                : theme.colors.gray[0],
            height: 300,
          })}
        >
          <Button variant="outline">Stack 1</Button>
          <Button variant="outline">Stack 2</Button>
          <Button variant="outline">Stack 3</Button>
        </Stack>
      </Container>
    </>
  );
}
react mantine  stack component with flex

react mantine stack component with flex