React Mantine Modal Popup Example

In this tutorial, we will see how to use Modal Popup component in react mantine. We will create modal popup dialog sizes, Center modal vertically, Full page modal using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

React Mantine UI Modal Popup Example

1. react mantine open modal component with using useState hook.

import { useState } from "react";
import { Modal, Button, Group } from "@mantine/core";

export default function App() {
  const [opened, setOpened] = useState(false);
  return (
    <>
      <Modal
        opened={opened}
        onClose={() => setOpened(false)}
        title="Introduce yourself!"
      >
        {/* Modal content */}
      </Modal>

      <Group position="center">
        <Button onClick={() => setOpened(true)}>Open Modal</Button>
      </Group>
    </>
  );
}

mantine open modal component

2. react mantine center modal vertically.

import { useState } from "react";
import { Modal, Button, Group } from "@mantine/core";

export default function App() {
  const [opened, setOpened] = useState(false);
  return (
    <>
      <Modal
        opened={opened}
        onClose={() => setOpened(false)}
        title="React Mantine centered Modal"
        centered
      >
        {/* Modal content */}
      </Modal>

      <Group position="center">
        <Button onClick={() => setOpened(true)}>Open Modal</Button>
      </Group>
    </>
  );
}

mantine center modal vertically

3. react mantine Modal Popup dialog sizes sm, md, lg,xl. px, percentage etc.

<Modal size="sm" /> // -> predefined sm size
<Modal size="md" /> // -> predefined md size
<Modal size="lg" /> // -> predefined lg size
<Modal size="xl" /> // -> predefined xl size
<Modal size={378} /> // -> size in px
<Modal size="55%" /> // -> size in %
<Modal size="calc(100vw - 87px)" /> // -> size with calc
<Modal size="255%" /> // -> max-width is set to 100%, won't work

4. react mantine Full page modal.

import { useState } from "react";
import { Modal, Button, Group } from "@mantine/core";

export default function App() {
  const [opened, setOpened] = useState(false);
  return (
    <>
      <Modal
        opened={opened}
        onClose={() => setOpened(false)}
        title="React Mantine fullScreen Modal"
        fullScreen
      >
        {/* Modal content */}
      </Modal>

      <Group position="center">
        <Button onClick={() => setOpened(true)}>Open Modal</Button>
      </Group>
    </>
  );
}

5. react mantine overflow modal.

// (default) – overflow is handled by modal wrapper
<Modal overflow="outside" />

// overflow is handled by modal body
<Modal overflow="inside" />

6. react mantine animation transition modal.

import { useState } from "react";
import { Modal, Button, Group } from "@mantine/core";

export default function App() {
  const [opened, setOpened] = useState(false);
  return (
    <>
      <Modal
        opened={opened}
        onClose={() => setOpened(false)}
        title="React Mantine animation transition Modal"
        transition="fade"
        transitionDuration={600}
        transitionTimingFunction="ease"
      >
        {/* Modal content */}
      </Modal>

      <Group position="center">
        <Button onClick={() => setOpened(true)}>Open Modal</Button>
      </Group>
    </>
  );
}