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>
</>
);
}
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>
</>
);
}