Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

Use this file to discover all available pages before exploring further.

RetroWindow is the primary layout shell of the RetroWin portfolio. It wraps any page content in a pixel-perfect Windows 98 window frame — complete with a navy title bar, three control buttons, and an optional Internet Explorer–style address bar. The window can be freely dragged around the desktop using Framer Motion and toggled into a full-screen maximized state. Every route in the app renders its content inside a RetroWindow.

​
Props

​
title
string
required
The text displayed in the Windows 98 title bar at the top of the window. Keep it short — it renders in a bold pixel font at small size.
​
children
ReactNode
required
The content rendered inside the scrollable window body. Accepts any valid React children.
​
icon
ReactNode
An optional icon element (e.g. an <img> or inline SVG) rendered to the left of the title text in the title bar.
​
url
string
When provided, renders an Internet Explorer–style address bar below the title bar, showing a globe icon followed by the supplied URL string.
​
onClose
function
Called when the user clicks the X button. If omitted, clicking X navigates to '/' via React Router’s useNavigate.
​
defaultPosition
object
The initial position of the window on the desktop as { x, y } pixel offsets. Defaults to { x: 50, y: 50 }.
​
width
number
Window width in pixels. Defaults to 600. Ignored when the window is maximized.
​
height
number
Window height in pixels. Defaults to 400. Ignored when the window is maximized.
​
className
string
Additional CSS class names applied to the outermost window element. Defaults to "".

​
Usage

import { RetroWindow } from './components/y2k/RetroWindow';

function ProjectsPage() {
  return (
    <RetroWindow
      title="projects.exe"
      url="http://localhost/projects"
      defaultPosition={{ x: 120, y: 60 }}
      width={700}
      height={480}
    >
      <h2>My Projects</h2>
      <p>Welcome to my project showcase.</p>
    </RetroWindow>
  );
}

​
Behavior

​
Dragging

The window uses Framer Motion’s drag prop with dragMomentum: false for crisp, immediate repositioning. Dragging is scoped to the .window-drag-handle class on the title bar — clicking the window body does not initiate a drag. When the window is maximized, dragging is disabled.

​
Maximize

Clicking the □ button toggles the t boolean state. When true, the window expands to fill the entire viewport (inset-0, z-50, width: 100%, height: 100%) and the !transform-none utility removes any residual translate from the drag state. Clicking □ again restores the original width and height.

​
Close

Clicking X calls onClose if it is provided. Otherwise it calls navigate('/') from useNavigate(). The window is not unmounted by RetroWindow itself — the parent route is responsible for removing the component from the tree.

​
Minimize

The _ (minimize) button is rendered but is currently decorative — it has no click handler and does not hide the window.

​
Internal State

State variableTypeDescription
tbooleanTracks whether the window is currently filling the viewport. Toggled by the □ button.
RetroWindow must be rendered inside a React Router context because it uses useNavigate() internally for the default close behaviour.
Position multiple windows so they overlap slightly for an authentic cluttered-desktop feel. Use defaultPosition with staggered x/y values, e.g. { x: 60, y: 40 }, { x: 110, y: 80 }.

Build docs developers (and LLMs) love

Get started for freeTalk to us