Mantine Window Component

---

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

Overview

This component is created on top of the Mantine library. It requires Mantine 9.x and React 19.

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

Features

• 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
• withScrollArea prop to disable the internal ScrollArea wrapper
• controlsPosition prop for macOS-style (left) or Windows-style (right) button placement
• controlsOrder prop for custom button ordering (close, collapse, tools)

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 (
    <Window title="Hello World" opened defaultX={50} defaultY={50} defaultWidth={400} defaultHeight={300}>
      <Title order={4}>This is a window</Title>
    </Window>
  );
}

Sponsor

 
 ❤️ If this component has been useful to you or your team, please consider becoming a sponsor 
 

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.

---

studio.mp4

---