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.

• Draggable and resizable floating windows with 8-direction resize handles
• Portal or container-relative positioning (withinPortal)
• Controlled and uncontrolled position/size with mixed unit support (px, vw/vh, %)
• Responsive values via Mantine breakpoints for all dimension props
• Persistent state via localStorage (position, size, collapse state)
• Configurable drag boundaries to constrain movement
• Min/max size constraints with multi-unit support
• Collapsible content with double-click header toggle
• Z-index management with bring-to-front on interaction
• Window.Group compound component for coordinated multi-window management
• Layout presets: snap, tile, columns, rows, fill
• Full Mantine Styles API support with fine-grained classNames
• SSR-safe with hydration-compatible viewport unit resolution
• onPositionChange and onSizeChange callbacks

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';

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

function Demo() {
  return (
    <Window title="Hello World" opened defaultX={50} defaultY={50} defaultWidth={400} defaultHeight={300}>
      <Title order={4}>This is a window</Title>
    </Window>
  );
}

Your support helps me:

• Keep the project actively maintained with timely bug fixes and security updates
• Add new features, improve performance, and refine the developer experience
• Expand test coverage and documentation for smoother adoption
• Ensure long‑term sustainability without relying on ad hoc free time
• Prioritize community requests and roadmap items that matter most

Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.

Your help truly matters.

💚 Become a sponsor today and help me keep this project reliable, up‑to‑date, and growing for everyone.