React Mantine Space Component Example

In this tutorial, we will see how to use space component in react mantine core. We will create horizontal and vertical spacing component using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13

1. react mantine using Space component to add horizontal spacing between text elements. You can also add small, medium, large size spacing.

import { Text, Space, Container } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container size="xs">
        <Text color="blue">First line</Text>
        <Space h="md" />
        <Text  color="green">Second line</Text>
      </Container>
    </>
  );
}

mantine space component

2. react mantine using Space component to add horizontal spacing between button elements.

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

export default function App() {
  return (
    <>
      <Container size="xs">
        <Button>Button 1</Button>
        <Space h="lg" />
        <Button>Button 2</Button>
      </Container>
    </>
  );
}

react mantine using space component horizontal button

3. react mantine using Space component to add vertical spacing between text elements. You can also add small, medium, large size spacing.

import { Text, Space, Container } from '@mantine/core';

export default function App() {
  return (
    <>
      <Container size="xs" style={{ display: 'flex' }}>
        <Text color="blue">First line</Text>
        <Space w="lg" />
        <Text  color="green">Second line</Text>
      </Container>
    </>
  );
}

vertical spacing between text elements

4. react mantine using Space component to add vertical spacing between button elements.

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

export default function App() {
  return (
    <>
      <Container size="xs" style={{ display: 'flex' }}>
        <Button>Button 1</Button>
        <Space w="lg" />
        <Button>Button 2</Button>
      </Container>
    </>
  );
}

react vertical spacing between button