Skip to main content

Documentation Index

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

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

RetroWindow is the core UI container in NeonRetro Sys_Admin. It mimics a late-1990s desktop window — complete with a solid-color title bar, three chrome control buttons (minimize, maximize, close), and an inset body panel — all rendered with Tailwind’s custom y2k-* color tokens. When draggable is enabled, the entire window becomes a Framer Motion drag target that users can reposition freely on the screen. Every instance mounts with a subtle scale-in animation and exits gracefully when removed from the tree via AnimatePresence.

​
Props

​
title
string
required
Text displayed in the window’s title bar. Rendered in a bold monospace font and truncated with an ellipsis if it exceeds the available width.
​
color
'magenta' | 'cyan' | 'lime' | 'purple'
default:"magenta"
Controls the window’s border color, title bar background, and neon drop-shadow. Each value maps to a pair of Tailwind utility classes (see Color Variants below).
​
draggable
boolean
default:"false"
When true, the root element is swapped from a plain <div> to a Framer Motion motion.div and receives drag, dragMomentum: false, and dragElastic: 0.1 props, allowing the window to be grabbed and moved around the viewport.
​
onClose
function
Callback fired when the user clicks the × (close) button in the title bar. The minimize and maximize buttons are present for aesthetics but do not currently emit events. If onClose is omitted, clicking × has no effect.
​
className
string
Additional Tailwind or custom CSS classes applied directly to the root element. Useful for overriding width, position, or z-index on a per-instance basis.
​
children
ReactNode
required
Content rendered inside the window body panel. The body has p-4, flex-1, overflow-auto, and a semi-transparent bg-y2k-gray/50 background.

​
Color Variants

Each color value applies two Tailwind classes to the root element — a border color and a neon box-shadow — and a solid background to the title bar:
colorRoot classesTitle bar background
magentaborder-y2k-magenta shadow-retro-magentabg-y2k-magenta
cyanborder-y2k-cyan shadow-retro-cyanbg-y2k-cyan
limeborder-y2k-lime shadow-retro-limebg-y2k-lime
purpleborder-y2k-purple shadow-retro-purplebg-y2k-purple
Title bar text and the control button icons always render in text-y2k-black to ensure contrast against the saturated background.

​
Enter / Exit Animations

Every RetroWindow instance — draggable or not — carries Framer Motion animation props on its root element: 
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.2 }}
Wrap the window in AnimatePresence when you want the exit animation to play on unmount (for example, when toggling visibility with a close button).

​
Drag Behavior

When draggable={true}, the component switches its root element to motion.div and spreads the following Framer Motion drag configuration: 
drag={true}
dragMomentum={false}
dragElastic={0.1}
Setting dragMomentum to false means the window stops exactly where you release it rather than gliding further. A small dragElastic value of 0.1 gives a subtle rubber-band feel at the drag boundaries.
The title bar always carries the .cursor-move CSS cursor class, hinting to users that the window is draggable even before they interact with it — even when draggable is false on the root element.

​
Usage

// Static window — no drag, no close handler
<RetroWindow title="system_status.log" color="purple">
  <p className="font-mono text-xs text-y2k-purple">&gt; Initializing...</p>
</RetroWindow>

// Draggable window with close handler
<RetroWindow
  title="now_playing.exe"
  color="cyan"
  draggable={true}
  onClose={() => setOpen(false)}
>
  <div>Now playing: Rust & WebAssembly</div>
</RetroWindow>
When toggling window visibility, pair RetroWindow with AnimatePresence from Framer Motion to play the exit animation before the element is removed: 
import { AnimatePresence } from 'framer-motion';
import { RetroWindow } from '../components/ui/RetroWindow';

function App() {
  const [open, setOpen] = useState(true);

  return (
    <AnimatePresence>
      {open && (
        <RetroWindow
          title="alert.exe"
          color="magenta"
          draggable={true}
          onClose={() => setOpen(false)}
        >
          <p className="font-mono text-sm">Something happened.</p>
        </RetroWindow>
      )}
    </AnimatePresence>
  );
}

​
Where It’s Used

RetroWindow is used extensively across the portfolio:
  • Home — now_playing.exe (cyan, draggable) and system_status.log (purple, draggable) float in the hero section
  • About — VITAL_STATS.dat (lime) and THINGS_I_NOTICE.log (purple) present bio content
  • Projects — A modal RetroWindow opens on icon click to display project details with demo and source links
  • Skills — Four windows (cyan, magenta, lime, purple) display skill progress bars by category
  • Contact — sign_guestbook.bat (lime) wraps the contact form; summon_me.txt (magenta) holds social links

Build docs developers (and LLMs) love

Get started for freeTalk to us