Skip to main content

Documentation Index

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

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

Win98Window is a reusable shell component that wraps any content in a faithful Windows 98 window frame, complete with a gradient titlebar, three system control buttons, and smooth Framer Motion layout animations. It can start in a normal or maximised state, minimise down to a compact taskbar button, and call an onClose callback when the X button is clicked.

​
Props reference

​
title
string
required
Text displayed in the window titlebar, truncated with an ellipsis if it overflows.
​
children
ReactNode
required
Content rendered inside the win98-content area of the window.
​
icon
ReactNode
A small icon (typically 14–16 px) rendered to the left of the title in the titlebar and also shown in the minimised taskbar button. Accepts any React node, including Lucide icons.
​
className
string
Additional CSS classes applied to the outer window div when the window is in its normal (non-maximised) state. Has no effect while the window is maximised, because the maximised state replaces the class entirely with fixed inset-0 z-50.
​
contentClassName
string
Additional CSS classes applied to the inner content div (the win98-content wrapper). Use this to add padding, overflow, or size constraints to the content area.
​
defaultMaximized
boolean
default:"false"
When true, the window renders in a maximised (fixed inset-0 z-50) full-screen state on first mount. The user can still restore it to normal size using the Maximize/Restore button.
​
onClose
function
Callback invoked when the user clicks the Close (X) button in the titlebar. If omitted, the button is still rendered but clicking it has no effect.

​
Window controls

The titlebar contains three small win98-button controls on the right side, each 16 × 16 px with the standard Win98 bevel shadow.

Minimize

Hides the window body and renders a compact taskbar-style button showing the icon and truncated title instead. Clicking that button restores the window to its previous state.

Maximize / Restore

Toggles between full-screen (fixed inset-0 z-50 w-full h-full) and the window’s normal size. The icon is always a square regardless of current state.

Close

Calls the onClose prop if it has been provided. Does not unmount the component automatically — the parent is responsible for removing it from the tree.
When the window is minimised, the entire window is replaced by a single <button> with the win98-button style, capped at max-w-[200px]. Clicking it sets the minimised state back to false and the full window reappears.

​
Animations

Win98Window wraps its root element in a Framer Motion motion.div with the layout prop, so width, height, and position changes animate automatically whenever the window switches between normal and maximised states. The transition uses a spring configuration with no bounce and a 300 ms duration: 
transition: {
  type: "spring",
  bounce: 0,
  duration: 0.3,
}
The animate prop drives explicit width and height values ("100vw" / "100vh" when maximised, "auto" when normal) so the spring interpolates between them smoothly rather than snapping. initial={false} prevents the animation from playing on the very first render.

​
Usage example

import { Win98Window } from './components/Win98Window';
import { FolderOpen } from 'lucide-react';

<Win98Window
  title="My Projects"
  icon={<FolderOpen size={14} />}
  defaultMaximized={false}
  onClose={() => setVisible(false)}
>
  <p>Window content goes here.</p>
</Win98Window>

​
CSS classes used

The component relies on three semantic CSS classes defined in main.css:
ClassRole
win98-windowOuter silver (bg-win-gray) container with shadow-bevel-outset (4-layer inset box-shadow) and 3 px padding
win98-titlebarNavy-to-blue gradient bar (linear-gradient(90deg, navy, #1084d0)) with white bold text and user-select: none
win98-contentWhite inner content area with shadow-bevel-inset and 2 px margin from the window edge
The bevel utilities (shadow-bevel-inset, shadow-bevel-outset) reproduce the classic Win98 raised/sunken border look using multi-layer inset box-shadow values in Tailwind’s --tw-shadow custom property.
Set defaultMaximized={true} on mobile viewports for a better experience — full-screen windows are far easier to interact with on small touch screens than floating panels with tiny control buttons.

Build docs developers (and LLMs) love

Get started for freeTalk to us