https://github.com/gfazioli/mantine-window
A Mantine 9 draggable, resizable floating window component with persistent state, customizable controls position/order, optional ScrollArea, WindowGroup compound component, and layout presets.
https://github.com/gfazioli/mantine-window
component draggable extension floating-window mantine mantine-ui mantine-v9 react react-component resizable typescript window
Last synced: 16 days ago
JSON representation
A Mantine 9 draggable, resizable floating window component with persistent state, customizable controls position/order, optional ScrollArea, WindowGroup compound component, and layout presets.
- Host: GitHub
- URL: https://github.com/gfazioli/mantine-window
- Owner: gfazioli
- License: mit
- Created: 2025-11-21T16:22:35.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2026-06-23T05:51:54.000Z (26 days ago)
- Last Synced: 2026-06-23T07:23:41.355Z (26 days ago)
- Topics: component, draggable, extension, floating-window, mantine, mantine-ui, mantine-v9, react, react-component, resizable, typescript, window
- Language: TypeScript
- Homepage: https://gfazioli.github.io/mantine-window
- Size: 14.1 MB
- Stars: 14
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Mantine Window Component
[](https://www.npmjs.com/package/@gfazioli/mantine-window)
[](https://www.npmjs.com/package/@gfazioli/mantine-window)
[](https://www.npmjs.com/package/@gfazioli/mantine-window)
---
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
## Overview
This component is created on top of the [Mantine](https://mantine.dev/) library.
It requires **Mantine 9.x** and **React 19**.
[Mantine Window](https://gfazioli.github.io/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](https://gfazioli.github.io/mantine-window/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)
## Installation
```sh
npm install @gfazioli/mantine-window
```
or
```sh
yarn add @gfazioli/mantine-window
```
After installation import package styles at the root of your application:
```tsx
import '@gfazioli/mantine-window/styles.css';
```
## Usage
```tsx
import { Window } from '@gfazioli/mantine-window';
import { Title } from '@mantine/core';
function Demo() {
return (
This is a window
);
}
```
## Sponsor
[
❤️ If this component has been useful to you or your team, please consider becoming a sponsor
](https://github.com/sponsors/gfazioli?o=esc)
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](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.
---
https://github.com/user-attachments/assets/7f80b2c0-90b1-442f-82c8-fddb75cca14e
---
[](https://www.star-history.com/#gfazioli/mantine-window&Timeline)