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

PropTypeDefaultDescription
titlestring"Window"Window title text
iconReactNode-Window icon
defaultPosition{ x: number, y: number }-Initial window position
defaultSize{ width: number, height: number }-Initial window size
resizablebooleanfalseAllow window resizing
closablebooleantrueShow close button
minimizablebooleantrueShow minimize button
maximizablebooleantrueShow 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.