---
title: Window
description: "Draggable, resizable modern interface window (All Settings, Grand Exchange, Collection Log): thick tan border, header row, close button."
---

<Component path="window/playground" />

## Installation

```bash
npx shadcn@latest add https://osrsui.com/r/window.json
```

## Usage

```tsx
<Window>
  <WindowHeader start={<Button variant="metal" tone="white" size="sm">History</Button>} end={<WindowClose />}>
    Grand Exchange
  </WindowHeader>
  <WindowBody>…</WindowBody>
</Window>
```

## Dragging, resizing and scrolling

All three are opt-in. Drag by the header, resize from the game's drag-dots corner. Sizes and positions snap to whole game pixels, so the frame stays crisp at any size.

```tsx
<Window draggable resizable defaultSize={{ width: 440, height: 300 }} minWidth={240} minHeight={140}>
  <WindowHeader end={<WindowClose />}>Quest List</WindowHeader>
  <WindowBody scroll>…</WindowBody>
</Window>
```

| Prop | Type | Description |
| --- | --- | --- |
| `draggable` | `boolean` | Drag the window by its header (buttons in the header still click). |
| `resizable` | `boolean` | Show the corner drag dots and resize from them. |
| `defaultPosition` | `{ x, y }` | Initial offset when draggable. |
| `defaultSize` | `{ width, height }` | Initial size when resizable. |
| `minWidth` / `minHeight` | `number` | Resize limits in CSS px. |
| `onPositionChange` / `onSizeChange` | callbacks | Persist where the user left the window. |
| `WindowBody scroll` | `boolean` | Wrap the body in the OSRS scroll area. |

## Frames, menu and dividers

`frame="rivets"` (default) is the current steel frame used by Combat Achievements, the Collection Log and the Bank: the header gets a riveted divider automatically. `frame="tan"` is the brown border of the Grand Exchange.

```tsx
<Window frame="rivets">
  <WindowHeader
    start={<WindowMenu items={[{ value: "tasks", label: "Tasks" }, { value: "bosses", label: "Bosses" }]} value={view} onValueChange={setView} />}
    end={<WindowClose />}
  >
    Combat Achievements - Tasks
  </WindowHeader>
  <div className="flex">
    <Filters />
    <WindowSeparator orientation="vertical" />
    <Tasks />
  </div>
</Window>
```

`WindowMenu` is the hamburger view switcher; `WindowSeparator` is the riveted divider, horizontal or vertical.