Mantine Window

https://gfazioli.github.io/mantine-window
Admin
A Mantine extension component that allows creating draggable and resizable windows within...
Tokens:9,186
Snippets:54
Trust Score:8.3
Update:8 months ago
Show doc for...
Tokens:
Raw
### Window with Position and Size Callbacks

Source: https://gfazioli.github.io/mantine-window/index

This example shows how to use `onPositionChange` and `onSizeChange` callbacks to react to window movements and resizing. The callbacks log the new position or size to the console.

```typescript
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="With Callbacks"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 400, height: 300 }}
        persistState={false}
        withinPortal={false}
        onPositionChange={(pos) => {
          // eslint-disable-next-line no-console
          console.log('Position changed:', pos);
        }}
        onSizeChange={(size) => {
          // eslint-disable-next-line no-console
          console.log('Size changed:', size);
        }}
      >
        <Title order={4}>Open console to see callbacks</Title>
        <p>Move or resize this window to trigger callbacks</p>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Install Mantine Window with NPM

Source: https://gfazioli.github.io/mantine-window/index

Installs the @gfazioli/mantine-window package using the NPM package manager. This command is equivalent to the Yarn installation for NPM users.

```bash
npm install @gfazioli/mantine-window
```

--------------------------------

### Install Mantine Window with Yarn

Source: https://gfazioli.github.io/mantine-window/index

Installs the @gfazioli/mantine-window package using the Yarn package manager. This is the first step to integrating the component into your project.

```bash
yarn add @gfazioli/mantine-window
```

--------------------------------

### Multiple Windows Management

Source: https://gfazioli.github.io/mantine-window/index

This example demonstrates how to render and manage multiple windows within the same container. Each window has a unique `id` for state persistence and can be brought to the front by clicking on it.

```typescript
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Window 1"
        id="demo-window-1"
        opened
        defaultPosition={{ x: 20, y: 20 }}
        defaultSize={{ width: 300, height: 250 }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>First Window</Title>
        <p>Click on a window to bring it to front</p>
      </Window>
      <Window
        title="Window 2"
        id="demo-window-2"
        opened
        defaultPosition={{ x: 180, y: 80 }}
        defaultSize={{ width: 300, height: 250 }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Second Window</Title>
        <p>Click on a window to bring it to front</p>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Create Responsive Window with Viewport Units

Source: https://gfazioli.github.io/mantine-window/index

Illustrates how to create a responsive Mantine Window by combining viewport units (vw, vh) for position and size. This example also includes pixel-based minimum and viewport-based maximum size constraints.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open window</Button>
      <Window
        title="Responsive Window"
        opened={opened}
        onClose={close}
        defaultPosition={{ x: '5vw', y: '10vh' }}
        defaultSize={{ width: '50vw', height: '40vh' }}
        minWidth="300px"
        minHeight="200px"
        maxWidth="90vw"
        maxHeight="80vh"
        persistState={false}
      >
        <Title order={4}>Viewport-based Position & Size</Title>
        <Stack gap="sm">
          <Text>
            <strong>Position:</strong> x: 5vw, y: 10vh
          </Text>
          <Text>
            <strong>Size:</strong> width: 50vw, height: 40vh
          </Text>
          <Text>
            <strong>Min:</strong> 300px x 200px
          </Text>
          <Text>
            <strong>Max:</strong> 90vw x 80vh
          </Text>
          <Text size="sm" c="dimmed">
            This window combines viewport units for position and size with pixel-based minimum
            constraints and viewport-based maximum constraints. All units are relative to the
            viewport.
          </Text>
        </Stack>
      </Window>
    </>
  );
}
```

--------------------------------

### Enable Full Size Resize Handles in Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

This example shows how to enable full-size resize handles for the Mantine Window component by setting the `fullSizeResizeHandles` prop to `true`. This feature extends the resize handles to span the entire edge of the window, offering a larger and more user-friendly interaction area for resizing. Corner handles remain for diagonal resizing.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Full Size Resize Handles"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 450, height: 350 }}
        fullSizeResizeHandles
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Full Size Resize Handles</Title>
        <p>
          With <code>fullSizeResizeHandles</code> enabled, the side handles (top, bottom, left,
          right) span the entire width or height of the window.
        </p>
        <p>
          This makes it easier to resize from any edge, while corner handles (14x14px) remain for
          diagonal resizing.
        </p>
      </Window>
    </Box>
  );
}

```

--------------------------------

### Window with Persistent State

Source: https://gfazioli.github.io/mantine-window/index

This example demonstrates how to persist the window's position, size, and collapsed state using the `persistState` prop. The window's state is saved in localStorage and restored upon page refresh.

```typescript
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="With Persistence"
        id="persistent-window-demo"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 400, height: 300 }}
        persistState
        withinPortal={false}
      >
        <Title order={4}>Position, size, and collapsed state are saved in localStorage</Title>
        <p>Move, resize, or collapse/expand this window, then refresh the page</p>
        <p>The window will remember its last position, size, and collapsed state</p>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Set Initial Window Position with defaultPosition Prop

Source: https://gfazioli.github.io/mantine-window/index

Allows setting the initial position of the window using the `defaultPosition` prop. This prop accepts an object with `x` and `y` coordinates to specify where the window should appear on the screen when it's first opened. This is particularly useful for embedded UI components or when a specific starting location is desired.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Custom Position"
        opened
        defaultPosition={{ x: 200, y: 150 }}
        defaultSize={{ width: 400, height: 300 }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>This window starts at x:200, y:150</Title>
      </Window>
    </Box>
  );
}

```

--------------------------------

### Centered and Fixed Window

Source: https://gfazioli.github.io/mantine-window/index

This example creates a window that is centered and cannot be moved or resized. It uses `resizable="none"` and `draggable="none"` props to disable these interactions.

```typescript
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Centered Window"
        opened
        defaultPosition={{ x: 190, y: 100 }}
        defaultSize={{ width: 420, height: 300 }}
        resizable="none"
        draggable="none"
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Centered, fixed window</Title>
        <p>This window is centered and cannot be moved or resized</p>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Disable Window Collapsing

Source: https://gfazioli.github.io/mantine-window/index

This example shows how to disable the collapsing functionality of the window by setting the `collapsable` prop to `false`. This removes the collapse button and the double-click header behavior.

```typescript
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="No Collapsable"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 400, height: 300 }}
        collapsable={false}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>This window cannot be collapsed</Title>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Basic Mantine Window Usage (React)

Source: https://gfazioli.github.io/mantine-window/index

Demonstrates the basic usage of the Mantine Window component in a React application. It shows how to set default position, size, and enable features like `withinPortal: false` for relative positioning.

```jsx
import { Window, type WindowProps } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    {/** In this demo, the Window is positioned relative to its parent container. Check the docs below to learn more about the "withinPortal" prop. */}
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        defaultPosition={{ x: 0, y: 0}}
        defaultSize={{ width: 320, height: 256 }}
        withinPortal={false}
        maxWidth={500}
        maxHeight={500}
        opened
        title="Hello, World! Hello, Mantiners! Say Hello to the Window component"
      >
        <Title order={4}>This is a window with data</Title>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Set Custom Initial Window Size with defaultSize Prop

Source: https://gfazioli.github.io/mantine-window/index

Enables setting custom initial dimensions for the window using the `defaultSize` prop. This prop takes an object with `width` and `height` properties to define the window's size upon its first appearance. This provides control over the initial visual footprint of the window.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Custom Size"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 500, height: 400 }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>This window is 500x400 pixels</Title>
      </Window>
    </Box>
  );
}

```

--------------------------------

### Viewport-based Constraints for Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

Demonstrates how to use viewport units (vw, vh) to set responsive minimum and maximum size constraints for the Mantine Window component. These constraints adapt to the browser window size, ensuring the window scales proportionally.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open window</Button>
      <Window
        title="Viewport-based Constraints"
        opened={opened}
        onClose={close}
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 500, height: 350 }}
        minWidth="30vw"
        minHeight="20vh"
        maxWidth="80vw"
        maxHeight="70vh"
        persistState={false}
      >
        <Title order={4}>Viewport-based Min/Max Size</Title>
        <Stack gap="sm">
          <p>
            <strong>Min:</strong> 30vw x 20vh
          </p>
          <p>
            <strong>Max:</strong> 80vw x 70vh
          </p>
          <p>Try resizing your browser window to see the constraints adapt!</p>
        </Stack>
      </Window>
    </>
  );
}

```

--------------------------------

### Mixed Unit Constraints for Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

Illustrates how to combine different unit types (pixels and viewport units) for setting minimum and maximum size constraints on the Mantine Window component. This allows for flexible hybrid sizing strategies.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open window</Button>
      <Window
        title="Mixed Unit Constraints"
        opened={opened}
        onClose={close}
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 400, height: 350 }}
        minWidth={300}
        minHeight="15vh"
        maxWidth="60vw"
        maxHeight={600}
        persistState={false}
      >
        <Title order={4}>Mixed Units</Title>
        <Stack gap="sm">
          <p>
            <strong>Min Width:</strong> 300px (fixed)
          </p>
          <p>
            <strong>Min Height:</strong> 15vh (viewport-based)
          </p>
          <p>
            <strong>Max Width:</strong> 60vw (viewport-based)
          </p>
          <p>
            <strong>Max Height:</strong> 600px (fixed)
          </p>
        </Stack>
      </Window>
    </>
  );
}

```

--------------------------------

### Size Window with Percentage Units

Source: https://gfazioli.github.io/mantine-window/index

Demonstrates how to set the size of a Mantine Window using percentage units. When `withinPortal` is false, percentages are relative to the parent container. Ensure the parent container has a defined size and position.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Stack, Text, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500, border: '2px dashed gray' }}>
      <Window
        title="Percentage Size"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: '60%', height: '50%' }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Size with Percentage</Title>
        <Stack gap="sm">
          <Text>
            <strong>Size:</strong> width: 60%, height: 50%
          </Text>
          <Text>
            <strong>Reference:</strong> Parent container (dashed border)
          </Text>
          <Text size="sm" c="dimmed">
            The window size is 60% of container width and 50% of container height. Percentage units
            with <code>withinPortal=false</code> are relative to the parent container.
          </Text>
        </Stack>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Import Mantine Window Styles

Source: https://gfazioli.github.io/mantine-window/index

Imports the default styles for the Mantine Window component at the root of your application. This ensures the component is styled correctly.

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

--------------------------------

### Control Window Positioning with withinPortal Prop

Source: https://gfazioli.github.io/mantine-window/index

Demonstrates how to use the `withinPortal` prop to control window positioning. `withinPortal={true}` (default) uses fixed positioning relative to the viewport, while `withinPortal={false}` uses absolute positioning relative to its parent container. The parent container must have `position: relative` for absolute positioning to work correctly.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Group, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [portalOpened, { open: openPortal, close: closePortal }] = useDisclosure(false);
  const [containerOpened, { open: openContainer, close: closeContainer }] = useDisclosure(false);

  return (
    <>
      <Group mb="md">
        <Button onClick={openPortal}>Open in Portal (Fixed)</Button>
        <Button onClick={openContainer}>Open in Container (Relative)</Button>
      </Group>

      {/* Window with withinPortal={true} (default) - fixed positioning */}
      <Window 
        title="Fixed Window (Portal)" 
        opened={portalOpened} 
        onClose={closePortal}
        withinPortal={true}
        persistState={false}
        defaultPosition={{ x: 100, y: 100 }}
      >
        <Stack p="md">
          <Title order={4}>Portal Window</Title>
          <Text size="sm">
            This window uses <strong>withinPortal=true</strong> (default).
            It is positioned fixed relative to the viewport and will stay in place even when scrolling.
          </Text>
        </Stack>
      </Window>

      {/* Container for relative window */}
      <Stack pos="relative" style={{ width: '100%', height: 400, border: '2px dashed gray' }} p="md">
        <Text c="dimmed" size="sm">Container with position: relative</Text>
        
        {/* Window with withinPortal={false} - absolute positioning */}
        <Window 
          title="Relative Window (Container)" 
          opened={containerOpened} 
          onClose={closeContainer}
          withinPortal={false}
          persistState={false}
          defaultPosition={{ x: 0, y: 0 }}
          defaultSize={{ width: 400, height: 300 }}
        >
          <Stack p="md">
            <Title order={4}>Container Window</Title>
            <Text size="sm">
              This window uses <strong>withinPortal=false</strong>.
              It is positioned absolute relative to its parent container and cannot be dragged or resized outside the container boundaries.
            </Text>
          </Stack>
        </Window>
      </Stack>
    </>
  );
}

```

--------------------------------

### Constrain Window Resize with Min/Max Dimensions

Source: https://gfazioli.github.io/mantine-window/index

Shows how to enforce minimum and maximum dimensions for a Mantine Window during resize operations using `minWidth`, `minHeight`, `maxWidth`, and `maxHeight` props. This ensures the window stays within defined boundaries.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Constrained Resize"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 400, height: 300 }}
        minWidth={300}
        minHeight={200}
        maxWidth={600}
        maxHeight={450}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Try resizing this window</Title>
        <p>Min: 300x200px</p>
        <p>Max: 600x450px</p>
      </Window>
    </Box>
  );
}
```

--------------------------------

### Styling Mantine Window Component using Styles API

Source: https://gfazioli.github.io/mantine-window/index

This snippet illustrates how to apply custom styles to the Mantine Window component using its Styles API. The `classNames` prop allows targeting specific inner elements of the window, such as the root, container, content, header, and resize handles. This enables detailed visual customization of the component.

```css
/*
 * Hover over selectors to apply outline styles
 *
 */
```

--------------------------------

### Create a Non-Collapsible Window with Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

This code snippet demonstrates how to create a window component using '@gfazioli/mantine-window' that cannot be collapsed by double-clicking its header. It utilizes the `collapsable={false}` prop to disable this functionality. The component is configured with basic properties like `title`, `opened`, `defaultPosition`, `defaultSize`, `persistState`, and `withinPortal`.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="No Collapsable"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 400, height: 300 }}
        collapsable={false}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>This window cannot be collapsed</Title>
        <p>Double-clicking the header will not collapse the window</p>
      </Window>
    </Box>
  );
}

```

--------------------------------

### Position Window with Percentage Units - React

Source: https://gfazioli.github.io/mantine-window/index

Illustrates positioning the Mantine Window component using percentage units. When `withinPortal={false}`, percentages are relative to the parent container, which must have `position: relative`. This allows for positioning relative to a specific DOM element.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Stack, Text, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500, border: '2px dashed gray' }}>
      <Window
        title="Percentage Position"
        opened
        defaultPosition={{ x: '10%', y: '15%' }}
        defaultSize={{ width: 400, height: 250 }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Position with Percentage</Title>
        <Stack gap="sm">
          <Text>
            <strong>Position:</strong> x: 10%, y: 15%
          </Text>
          <Text>
            <strong>Reference:</strong> Parent container (dashed border)
          </Text>
          <Text size="sm" c="dimmed">
            With <code>withinPortal=false</code>, percentage units are calculated relative to the
            parent container, not the viewport. The parent must have <code>position: relative</code>.
          </Text>
        </Stack>
      </Window>
    </Box>
  );
}

```

--------------------------------

### Controlled Mantine Window (React)

Source: https://gfazioli.github.io/mantine-window/index

Illustrates how to control the open and close state of the Mantine Window component using React hooks (`useDisclosure`). This allows programmatic management of the window's visibility.

```jsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <Stack pos="relative" style={{ width: '100%', height: 500 }}>
      <Button onClick={open}>Open window</Button>
      <Window title="Hello World" opened={opened} onClose={close} withinPortal={false}>
        <Title order={4}>This is a window</Title>
      </Window>
    </Stack>
  );
}
```

--------------------------------

### Position Window with Viewport Units (vw/vh) - React

Source: https://gfazioli.github.io/mantine-window/index

Demonstrates positioning the Mantine Window component using viewport units (vw/vh). These units are always relative to the browser viewport, ensuring the window's position adapts to the browser window size. Use `withinPortal={true}` (default) for consistent behavior.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open window</Button>
      <Window
        title="Viewport Position"
        opened={opened}
        onClose={close}
        defaultPosition={{ x: '10vw', y: '15vh' }}
        defaultSize={{ width: 400, height: 300 }}
        persistState={false}
      >
        <Title order={4}>Position with Viewport Units</Title>
        <Stack gap="sm">
          <Text>
            <strong>Position:</strong> x: 10vw, y: 15vh
          </Text>
          <Text>
            <strong>Reference:</strong> Viewport (browser window)
          </Text>
          <Text size="sm" c="dimmed">
            Viewport units (vw/vh) are always relative to the browser viewport. The position adapts
            proportionally when resizing the browser window.
          </Text>
        </Stack>
      </Window>
    </>
  );
}

```

--------------------------------

### Percentage Drag Boundaries for Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

Set drag boundaries for Mantine Window using percentage values relative to the viewport or container. This provides a flexible way to constrain window movement proportionally. The `dragBounds` prop accepts percentage strings for `minX`, `maxX`, `minY`, and `maxY`.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Stack, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Percentage Drag Bounds"
        opened
        defaultPosition={{ x: 50, y: 50 }}
        defaultSize={{ width: 350, height: 280 }}
        dragBounds={{
          minX: '5%',
          maxX: '75%',
          minY: '5%',
          maxY: '75%',
        }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Percentage Boundaries</Title>
        <Stack gap="sm">
          <p>
            <strong>X Bounds:</strong> 5% to 75%
          </p>
          <p>
            <strong>Y Bounds:</strong> 5% to 75%
          </p>
          <p>Boundaries are percentage of viewport/container size.</p>
        </Stack>
      </Window>
    </Box>
  );
}

```

--------------------------------

### Import Mantine Window Layer Styles

Source: https://gfazioli.github.io/mantine-window/index

Imports the Mantine Window component styles within a specific layer named 'mantine-window'. This can be useful for managing CSS specificity and order.

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

--------------------------------

### Viewport-based Drag Boundaries for Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

Configure Mantine Window to use viewport units (vw, vh) for responsive drag boundaries. This ensures windows stay within proportional limits relative to the browser window size. The `dragBounds` prop accepts viewport units for `minX`, `maxX`, `minY`, and `maxY`.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open window</Button>
      <Window
        title="Viewport-based Drag Bounds"
        opened={opened}
        onClose={close}
        defaultPosition={{ x: '10vw', y: '10vh' }}
        defaultSize={{ width: 400, height: 300 }}
        dragBounds={{
          minX: '10vw',
          maxX: '70vw',
          minY: '10vh',
          maxY: '70vh',
        }}
        persistState={false}
      >
        <Title order={4}>Viewport-based Boundaries</Title>
        <Stack gap="sm">
          <p>
            <strong>X Bounds:</strong> 10vw to 70vw
          </p>
          <p>
            <strong>Y Bounds:</strong> 10vh to 70vh
          </p>
          <p>Try dragging this window - it stays within viewport-based boundaries!</p>
          <p>Resize your browser to see bounds adapt.</p>
        </Stack>
      </Window>
    </>
  );
}

```

--------------------------------

### Drag Boundaries for Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

Shows how to restrict the draggable area of the Mantine Window component using the `dragBounds` prop. This ensures the window remains within a defined rectangular region on the screen.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Box, Title } from '@mantine/core';

function Demo() {
  return (
    <Box pos="relative" style={{ width: '100%', height: 500 }}>
      <Window
        title="Bounded Dragging"
        opened
        defaultPosition={{ x: 100, y: 50 }}
        defaultSize={{ width: 400, height: 300 }}
        dragBounds={{
          minX: 50,
          maxX: 500,
          minY: 50,
          maxY: 400,
        }}
        persistState={false}
        withinPortal={false}
      >
        <Title order={4}>Try dragging this window</Title>
        <p>It can only move within specific bounds:</p>
        <p>X: 50-500, Y: 50-400</p>
      </Window>
    </Box>
  );
}

```

--------------------------------

### Size Window with Viewport Units (vw/vh) - React

Source: https://gfazioli.github.io/mantine-window/index

Shows how to set the size of the Mantine Window component using viewport units (vw/vh). These units ensure the window's dimensions scale proportionally with the browser viewport. Use `withinPortal={true}` (default) for consistent behavior.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Text, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open window</Button>
      <Window
        title="Viewport Size"
        opened={opened}
        onClose={close}
        defaultPosition={{ x: '5vw', y: '10vh' }}
        defaultSize={{ width: '40vw', height: '50vh' }}
        persistState={false}
      >
        <Title order={4}>Size with Viewport Units</Title>
        <Stack gap="sm">
          <Text>
            <strong>Size:</strong> width: 40vw, height: 50vh
          </Text>
          <Text>
            <strong>Position:</strong> x: 5vw, y: 10vh
          </Text>
          <Text>
            The window size and position scale proportionally with the viewport. Try resizing your
            browser window to see the window adapt!
          </Text>
        </Stack>
      </Window>
    </>
  );
}

```

--------------------------------

### Mixed Unit Drag Boundaries for Mantine Window

Source: https://gfazioli.github.io/mantine-window/index

Combine different unit types (pixels, viewport units, percentages) for drag boundaries in Mantine Window. This allows for sophisticated constraints by mixing fixed pixel values with responsive viewport units or percentages. The `dragBounds` prop supports a mix of number (pixels) and string (vw, vh, %) values.

```tsx
import { Window } from '@gfazioli/mantine-window';
import { Button, Stack, Title } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open window</Button>
      <Window
        title="Mixed Unit Drag Bounds"
        opened={opened}
        onClose={close}
        defaultPosition={{ x: 50, y: '10vh' }}
        defaultSize={{ width: 400, height: 300 }}
        dragBounds={{
          minX: 50,
          maxX: '80vw',
          minY: '10vh',
          maxY: 450,
        }}
        persistState={false}
      >
        <Title order={4}>Mixed Unit Boundaries</Title>
        <Stack gap="sm">
          <p>
            <strong>Min X:</strong> 50px (fixed)
          </p>
          <p>
            <strong>Max X:</strong> 80vw (viewport-based)
          </p>
          <p>
            <strong>Min Y:</strong> 10vh (viewport-based)
          </p>
          <p>
            <strong>Max Y:</strong> 450px (fixed)
          </p>
          <p>Mix different unit types for flexible boundaries!</p>
        </Stack>
      </Window>
    </>
  );
}

```
Tokens:
Raw