Mantine Window Component

Overview

This component is created on top of the Mantine library.

Mantine Window is a versatile UI container that brings a familiar desktop‑like window experience to React applications built with Mantine.

You can render windows in a portal for fixed, scroll‑independent overlays, or constrain them to a specific parent by setting withinPortal to false and using a relative container. The component supports both uncontrolled defaults (position and size) and controlled visibility via opened/onClose, plus optional drag boundaries to keep windows within prescribed X/Y ranges.

For state continuity, it can persist position and size to localStorage, and it exposes onPositionChange and onSizeChange callbacks for reacting to user interactions. The window’s behavior and chrome are configurable—draggable and resizable modes, collapse/close buttons, non‑collapsible headers, and centered, immovable presets—while appearance is tailored through Mantine’s Styles API with fine‑grained classNames for internal elements. Together, these features make it a robust foundation for modals, tools, and embedded UI panels in complex interfaces.

Note

→ Demo and Documentation → Youtube Video → More Mantine Components

Installation

npm install @gfazioli/mantine-window

or

yarn add @gfazioli/mantine-window

After installation import package styles at the root of your application:

import '@gfazioli/mantine-window/styles.css';

Usage

import { Window } from '@gfazioli/mantine-window';
import { Title } from '@mantine/core';

function Demo() {
  return (
    <Stack>
      <Window title="Hello World" opened>
        <Title order={4}>This is a window</Title>
      </Window>
    </Stack>
  );
}

---

studio.mp4

---