Skip to content

Window

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

Installation

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

Usage

<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.

<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.

<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.