Skip to main content

Documentation Index

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

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

WindowFrame is a decorative UI container component that faithfully recreates the iconic Windows 98 window chrome. It renders a raised outer frame in the classic silver-gray (bg-win-gray) with an inset bevel effect, a navy-blue title bar displaying a label in pixel font, three window-control buttons (_, □, x), and a sunken white content area beneath. Use it to give any section of your page an authentic late-1990s desktop-application aesthetic.

​
Props

​
title
string
required
Text displayed in the title bar. Long values are truncated with an ellipsis via truncate.
​
children
ReactNode
required
Content rendered inside the white inset content area below the title bar.
​
className
string
default:"\"\""
Additional Tailwind or custom CSS classes applied to the outermost wrapper <div>. Useful for controlling the window’s width, margin, or position.

​
Import

import { W as WindowFrame } from '../components/Primitives.js';

​
Usage

<WindowFrame title="My Window">
  <p className="font-times text-sm">Hello from the 90s!</p>
</WindowFrame>

​
Visual Anatomy

The component is composed of three nested layers:
LayerClassesDescription
Outer wrapperbg-win-gray shadow-win-out p-[2px]Silver-gray background with a raised (shadow-win-out) bevel border — the classic Windows raised-frame look. The className prop is applied here.
Title barbg-win-blue text-white px-1 py-[2px] flex justify-between items-center font-pixel text-[10px] mb-1Navy-blue strip across the top. The title text is left-aligned and truncated; the three window-control buttons are right-aligned in a flex row.
Window controlsbg-win-gray text-black shadow-win-out w-4 h-4 flex items-center justify-center font-pixel text-[8px] leading-none pb-[2px]Three small square buttons labelled _, □, and x, each styled with a raised shadow to mimic the Windows 98 button relief.
Content areap-2 bg-white shadow-win-inWhite panel with a sunken (shadow-win-in) inset shadow. All children are rendered here.
The minimize (_), maximize (□), and close (x) buttons are purely decorative. They have no click handlers in the current implementation and will not trigger any window management behaviour.

​
Nesting Windows

You can nest a WindowFrame inside another to create a dialog-within-a-window effect, just as Windows 98 applications commonly displayed modal dialogs on top of a parent window: 
<WindowFrame title="My Application">
  <p className="font-pixel text-[10px] mb-2">Main application content here.</p>

  <WindowFrame title="Confirm Delete" className="mt-2">
    <p className="font-pixel text-[10px] mb-2">Are you sure you want to delete this file?</p>
    <div className="flex gap-2 justify-end mt-1">
      <button className="bg-win-gray shadow-win-out px-3 py-[2px] font-pixel text-[10px]">OK</button>
      <button className="bg-win-gray shadow-win-out px-3 py-[2px] font-pixel text-[10px]">Cancel</button>
    </div>
  </WindowFrame>
</WindowFrame>
The inner WindowFrame receives its own title bar and raised chrome, creating the layered depth that is characteristic of the Windows 98 UI paradigm.

Build docs developers (and LLMs) love

Get started for freeTalk to us