Skip to main content

Documentation Index

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

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

BeveledPanel is the primary content container in Retro Webpage. It mimics the raised, beveled window frames of Windows 98 and Windows 95 — complete with an optional title bar, functioning-look minimize (_), maximize (□), and close (X) chrome buttons, and a white inset content area. Four colour variants let you match panels to the page’s teal, pink, or neutral palette, while an inset variant flips the border direction for a sunken well effect.

​
Props

​
children
ReactNode
required
Content rendered inside the panel’s white content area (p-2 padding). Accepts any valid React children — text, images, nested components, etc.
​
title
string
Optional title string. When provided, a Windows 98-style title bar is rendered above the content area. The title bar background is bg-retro-teal for default, teal, and inset variants, and bg-retro-pink for the pink variant.
​
variant
"default" | "teal" | "pink" | "inset"
default:"\"default\""
Controls the border bevel style applied to the outer panel wrapper:
ValueCSS ClassEffect
defaultbevel-outsetRaised outset border (standard Windows window frame)
tealbevel-tealOutset border with a teal accent
pinkbevel-pinkOutset border with a pink accent
insetbevel-insetSunken inset border (inner well or depressed field)
​
className
string
default:"\"\""
Optional additional class names merged onto the outer panel <div>. Use to control width, margin, grid placement, or any other layout concerns without modifying the component itself.

​
Variant Showcase

<BeveledPanel title="My Homepage" variant="default">
  <p className="font-vt323 text-lg">
    Welcome to my page! Sign my guestbook below. 👇
  </p>
</BeveledPanel>

​
Without a Title Bar

Omitting the title prop renders a plain bordered panel with no chrome — useful for image frames, card grids, or decorative containers: 
<BeveledPanel variant="default" className="w-48">
  <img src="/construction.gif" alt="Under Construction" className="w-full" />
</BeveledPanel>

​
DOM Structure

When title is provided: 
<div className="p-1 mb-4 bevel-outset {className}">
  {/* Title bar — teal for default/teal/inset, pink for pink variant */}
  <div className="px-2 py-1 mb-2 font-vt323 text-xl text-white flex justify-between items-center bg-retro-teal">
    <span>{title}</span>
    <div className="flex gap-1">
      <div className="w-4 h-4 bevel-outset bg-gray-200 ...">_</div>
      <div className="w-4 h-4 bevel-outset bg-gray-200 ...">□</div>
      <div className="w-4 h-4 bevel-outset bg-gray-200 ...">X</div>
    </div>
  </div>

  {/* Content area — bevel-inset applied for all variants except 'inset' */}
  <div className="p-2 bevel-inset bg-white h-full">
    {children}
  </div>
</div>
The minimize, maximize, and close buttons are purely decorative — they render as <div> elements with cursor-pointer and a hover background change, but have no onClick handlers attached. They exist solely for visual authenticity.

​
CSS Classes

ClassDescription
bevel-outsetRaised Windows 98-style border (light top-left, dark bottom-right)
bevel-tealOutset bevel with teal colour accent on the border highlights
bevel-pinkOutset bevel with pink colour accent on the border highlights
bevel-insetSunken inset border (dark top-left, light bottom-right)
p-1 mb-4Outer panel padding and bottom margin
bg-retro-tealTitle bar background for default, teal, and inset variants
bg-retro-pinkTitle bar background for the pink variant
font-vt323VT323 monospace pixel font used in the title bar text
w-4 h-4Fixed 16 × 16 px size for each chrome button
Nest BeveledPanel components to create multi-pane layouts reminiscent of Windows Explorer. Use variant="inset" for the inner panels to contrast with an outer variant="default" frame.

Build docs developers (and LLMs) love

Get started for freeTalk to us