Retro Window
Special
Windows 95/98 style draggable windows with minimize, maximize, and close buttons.
Import
import { PixelWindow } from "@/components/ui/pixel/pixel-window"Usage
š»My Computer
Welcome to Pixel Window!
This is a draggable, resizable window component styled like Windows 95/98.
Component Source
Copy and paste the following code into your project at /src/components/ui/pixel/pixel-window.tsx
"use client";
import { cva, type VariantProps } from "class-variance-authority";
import * as React from "react";
import { cn } from "@/lib/utils";
const pixelWindowVariants = cva(
"relative border-4 border-black bg-[#c0c0c0] shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]",
{
variants: {
variant: {
default: "bg-[#c0c0c0]",
blue: "bg-[#0000a8]",
teal: "bg-[#008080]",
dark: "bg-[#2a2a2a]",
},
size: {
sm: "min-w-[300px]",
md: "min-w-[400px]",
lg: "min-w-[600px]",
xl: "min-w-[800px]",
full: "w-full",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
},
);
export interface PixelWindowProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof pixelWindowVariants> {
title?: string;
icon?: React.ReactNode;
onClose?: () => void;
onMinimize?: () => void;
onMaximize?: () => void;
closable?: boolean;
minimizable?: boolean;
maximizable?: boolean;
draggable?: boolean;
isMaximized?: boolean;
isMinimized?: boolean;
}
const PixelWindow = React.forwardRef<HTMLDivElement, PixelWindowProps>(
(
{
// ... (more code below)Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Window" | Window title text |
| icon | ReactNode | - | Window icon |
| defaultPosition | { x: number, y: number } | - | Initial window position |
| defaultSize | { width: number, height: number } | - | Initial window size |
| resizable | boolean | false | Allow window resizing |
| closable | boolean | true | Show close button |
| minimizable | boolean | true | Show minimize button |
| maximizable | boolean | true | Show maximize button |
| onClose | () => void | - | Close callback |
Examples
Basic Window
Simple draggable window
š»My Computer
Welcome to Pixel Window!
This is a draggable, resizable window component styled like Windows 95/98.
With Icon
Window with title icon
š»My Computer
Welcome to Pixel Window!
This is a draggable, resizable window component styled like Windows 95/98.
Custom Size
Window with custom dimensions
š»My Computer
Welcome to Pixel Window!
This is a draggable, resizable window component styled like Windows 95/98.
Accessibility
This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.