Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-98/llms.txt

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

Win98Window is the core UI shell of the portfolio. It wraps any content inside an authentic-looking Windows 98 dialog box — complete with a retro-navy title bar, raised win98-out beveled border, and fully functional window controls. Every window is independently draggable anywhere on the desktop and can be maximized to fill the viewport above the taskbar.

​
Props

​
title
string
required
The text displayed in the title bar next to the optional icon. Keep it short; it is rendered with truncate so overflow is clipped.
​
children
ReactNode
required
The content rendered inside the window body. The body panel uses overflow-auto, so any amount of content scrolls within the window boundaries.
​
onClose
function
Callback fired when the user clicks the × close button. When omitted, the close button is not rendered in the title bar.
​
onMinimize
function
Callback fired when the user clicks the − minimize button. When omitted, the minimize button is not rendered. Use this to hide the window in your local state and show a corresponding taskbar entry.
​
className
string
default:"\"\""
Additional Tailwind or custom CSS classes applied to the outermost motion.div wrapper. Useful for positioning a window at a specific point on the desktop or applying custom z-index overrides.
​
defaultPosition
{ x: number; y: number }
default:"{x: 0, y: 0}"
The initial x/y pixel offset passed to Framer Motion’s initial prop. This determines where the window appears on the desktop before the user drags it.
​
width
string
default:"\"auto\""
The animated width of the window in its normal (non-maximized) state. Accepts any valid CSS value such as "480px" or "50vw". Hard-capped at 90vw by an inline style regardless of this value.
​
height
string
default:"\"auto\""
The animated height of the window in its normal (non-maximized) state. Accepts any valid CSS value such as "320px". Hard-capped at 90vh by an inline style regardless of this value.
​
icon
ReactNode
An optional icon element rendered to the left of the title text in the title bar. Pass a small SVG, emoji, or Lucide icon at 16×16px for best results.

​
Drag behavior

Dragging is managed entirely by Framer Motion’s drag prop, which is set to true whenever the window is in its normal (non-maximized) state. The title bar cursor switches between cursor-grab and cursor-grabbing to reinforce affordance. Two additional Motion options are applied:
  • dragMomentum: false — the window stops exactly where you release it, with no inertial glide.
  • dragElastic: 0.1 — a small amount of resistance is felt if you drag the window close to the viewport edge, preventing it from being lost off-screen.
When the window is maximized, drag is disabled so the full-screen panel stays locked at the top-left of the viewport.

​
Maximize behavior

Clicking the square □ button in the title bar toggles a boolean maximized state. The window animates between two configurations using a Framer Motion spring transition (bounce: 0, duration: 0.3s):
StateWidthHeightPositionz-index
Normalwidth propheight propDraggable (defaultPosition)z-40
Maximized100vwcalc(100vh - 40px)Locked to top-0 left-0z-50
The 40px offset in the maximized height accounts for the taskbar’s fixed h-10 height at the bottom of the viewport, so the window never overlaps the Start button or system tray.

​
Styling notes

The component applies two key Win98 utility classes from the project’s custom Tailwind plugin:
  • win98-out — a four-sided bevel that produces the classic raised-panel look on the outer window frame.
  • win98-in — applied to the content body, producing an inset / sunken appearance that contrasts with the outer frame.
The title bar uses bg-retro-navy (the project’s deep-blue accent color) with text-retro-white text. The three control buttons (−, □, ×) each use win98-btn for the beveled push-button appearance and bg-retro-gray for their fill. The content body additionally uses font-mono text-sm as the baseline typography, which individual pages can override via children.

​
Usage

import { W as Win98Window } from './components/Win98Window';
import { Monitor } from 'lucide-react';

export default function ProjectsPage() {
  const [open, setOpen] = React.useState(true);

  if (!open) return null;

  return (
    <Win98Window
      title="Stuff I Built"
      icon={<Monitor size={14} />}
      defaultPosition={{ x: 80, y: 60 }}
      width="560px"
      height="400px"
      onClose={() => setOpen(false)}
    >
      <p>My projects live here.</p>
    </Win98Window>
  );
}

DesktopIcon

Place shortcut icons on the desktop that open windows on double-click.

Taskbar

The Start menu and system tray that sit beneath every window.

Styling

Learn about win98-out, win98-in, and the retro color palette.

Adding Pages

Wire a new route and window together end-to-end.

Build docs developers (and LLMs) love

Get started for freeTalk to us