Skip to main content

Documentation Index

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

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

WindowPanel is the primary layout container used throughout neocities-dev. It wraps any content in a Win95/98-inspired window frame complete with a gradient title bar, a small icon glyph, and three decorative chrome buttons rendered via Lucide React icons.

​
Props

​
title
string
required
Text displayed in the title bar, rendered in font-pixel text-lg tracking-wider. Use file-extension-style labels like "about_me.txt" or "Projects.dir" to stay on-theme.
​
children
ReactNode
required
Content rendered inside the scrollable panel body. The body uses p-4 flex-1 overflow-auto bg-y2k-panel/50 — all overflow scrolls vertically within the panel bounds.
​
className
string
default:"\"\""
Additional Tailwind classes appended to the outermost bevel-window div. Useful for controlling panel height or grid placement, e.g. "h-full", "md:col-span-2", or "flex-none".
​
titleBarColor
string
default:"\"default\""
Controls the background and text colour of the title bar. One of four values:
ValueCSS appliedBest used for
"default"bg-gradient-to-r from-y2k-panelDark to-y2k-panel text-y2k-textGeneral-purpose panels
"cyan"bg-y2k-cyan text-blackInformational / intro panels
"magenta"bg-y2k-magenta text-whiteStatus / alert panels
"purple"bg-y2k-purple text-whiteDecorative / creative panels

​
Usage

​
Default (gradient) title bar

<WindowPanel title="readme.txt">
  <p className="font-mono text-sm">
    Welcome to my corner of the internet.
  </p>
</WindowPanel>

​
Cyan title bar

<WindowPanel title="about_me.txt" titleBarColor="cyan">
  <div className="flex gap-4 items-start">
    <img src="/avatar.png" alt="avatar" className="w-16 h-16" />
    <p className="font-sans text-sm">Hey there. I'm a developer...</p>
  </div>
</WindowPanel>

​
Magenta title bar

<WindowPanel title="status.ini" titleBarColor="magenta">
  <ul className="font-mono text-xs space-y-2">
    <li><span className="text-y2k-lime">Mood:</span> Caffeinated</li>
    <li><span className="text-y2k-lime">Editor:</span> VS Code</li>
  </ul>
</WindowPanel>

​
Purple title bar with custom className

<WindowPanel
  title="guestbook_preview.html"
  titleBarColor="purple"
  className="h-full"
>
  <p className="font-pixel text-xl text-y2k-cyan">Sign My Guestbook!</p>
</WindowPanel>

​
Title bar chrome

The title bar is a flex row with two children:
  1. Left side — a small w-3 h-3 bg-white/20 border border-white/40 square icon followed by the title text.
  2. Right side — three w-5 h-5 bevel buttons using Lucide icons:
    • Minus (size 12) — minimize
    • Square (size 10) — maximize
    • X (size 12) — close; hover state uses hover:text-y2k-magenta instead of cyan
The minimize, maximize, and close buttons are purely decorative. They have no onClick handlers and perform no action when clicked. They exist solely to reinforce the OS-window illusion.

​
Layout behaviour

WindowPanel renders as a flex flex-col div with the root class bevel-window. The title bar has a fixed height determined by px-2 py-1, and the body fills the remaining space with flex-1. If you want a panel to fill its parent’s height, pass className="h-full". 
{/* Panel that fills a grid cell */}
<WindowPanel title="skills.dat" className="h-full">
  <SkillsContent />
</WindowPanel>
For stacked panels inside a flex column, use flex-none on panels that should take only their natural height and flex-1 (via className) on the panel that should grow to fill the remaining space.

Build docs developers (and LLMs) love

Get started for freeTalk to us