Skip to Content
ShowcaseMantine ComponentsOverlays & Menus

Overlays & Menus

With Colors

HoverCard

Popover

Tooltip

See the Feedback & Loading page for Tooltip examples.

Modals are interactive components that require state management. Here’s how they look when rendered:

Modal Title

This is a preview of how a modal looks with the Frequency theme applied. In practice, modals are opened with state management.

import { useDisclosure } from '@mantine/hooks';
import { Modal, Button } from '@mantine/core';
 
function Demo() {
  const [opened, { open, close }] = useDisclosure(false);
  return (
    <>
      <Modal opened={opened} onClose={close} title="Modal Title">
        {/* Modal content */}
      </Modal>
      <Button onClick={open}>Open Modal</Button>
    </>
  );
}

Drawer

Drawers slide in from the edge of the screen. Here’s a static preview:

Drawer Title

Dashboard
Analytics
Settings
Profile
Logout

Page content (dimmed by overlay)

import { useDisclosure } from '@mantine/hooks';
import { Drawer, Button } from '@mantine/core';
 
function Demo() {
  const [opened, { open, close }] = useDisclosure(false);
  return (
    <>
      <Drawer opened={opened} onClose={close} title="Drawer Title">
        {/* Drawer content */}
      </Drawer>
      <Button onClick={open}>Open Drawer</Button>
    </>
  );
}

Overlay

Used to dim or block content behind modals and drawers.

Content behind overlay

This text is behind a semi-transparent overlay

Last updated on
Navigation