In this tutorial, we will see how to use Center component in react mantine core. We will create horizontal and vertical Centers component using react mantine.
Install & Setup Vite + React + Typescript + Mantine UI
How to Use Mantine in Next.JS 13
1. react mantine using Centers component content vertically and horizontally.
import { Center } from "@mantine/core";
export default function App() {
return (
<>
<Center style={{ width: 800, height: 400 }}>
<div>All elements inside Center are centered</div>
</Center>
</>
);
}
2. react mantine Center component with button vertically and horizontally.
import { Button, Center } from "@mantine/core";
export default function App() {
return (
<>
<Center style={{ width: 800, height: 400 }} bg="#ffb3ff">
<Button color="cyan">Button</Button>
</Center>
</>
);
}
3. react mantine ui Center component with icons. Before using icon you need to install @tabler/icons.
Run below command to install @tabler/icons.
npm i @tabler/icons
Use @tabler/icons in react mantine ui Center component with inline props.
import { Center, Anchor, Box } from "@mantine/core";
import { IconArrowLeft } from "@tabler/icons";
export default function App() {
return (
<>
<Anchor href="https://mantine.dev" target="_blank">
<Center inline>
<IconArrowLeft size={14} />
<Box ml={5}>Back to Mantine website</Box>
</Center>
</Anchor>
</>
);
}