Nostalgic98

A Windows-arcade style React/Preact UI component library inspired by 90s computing aesthetics, CRT monitors, and arcade cabinets. Built with Tailwind CSS and fully typed with TypeScript.

Features

• Win98 Chrome: Raised/sunken borders, gradient titlebars, classic button boxes
• Arcade Accents: CRT scanlines, pixel art mascot, neon glows, terminal displays
• Tailwind Powered: All styling via Tailwind utilities and CSS custom properties
• Fully Typed: Complete TypeScript definitions for all components and props
• React/Preact Compatible: Works with both React and Preact projects
• Zero Runtime JS: Styles are CSS/Tailwind — no JS animation libraries required

Installation

npm install nostalgic98
# or
yarn add nostalgic98
# or
pnpm add nostalgic98

Setup

1. Import the base styles

import 'nostalgic98/styles';

2. Configure Tailwind

Add the library to your tailwind.config.js content array:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/nostalgic98/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // The library provides its own theme extensions
      // but you can override them here
    },
  },
};

3. Use components

import { Window, Button, Badge, CRTScreen } from 'nostalgic98';

function App() {
  return (
    <div className="min-h-screen bg-teal p-8">
      <Window title="My Application" icon="🪟" collapsible>
        <div className="flex gap-4">
          <Button variant="primary">Click Me</Button>
          <Badge variant="success">Done</Badge>
        </div>
        <CRTScreen label="Score" value={1337} glow />
      </Window>
    </div>
  );
}

Component Categories

Layout

• Window — Classic Win98 window with titlebar
• Panel — Raised/sunken container
• Inset — Sunken inset area
• Titlebar — Gradient titlebar
• Content — Collapsible content area
• Divider / Spacer — Layout utilities

Forms

• Button — Classic Win98 button with variants
• Input / Textarea / Select — Form controls
• Checkbox / RadioGroup / Switch — Toggles
• Slider / NumberInput / FileUpload — Advanced inputs
• Label / FormField / FormGroup — Form layout

Data Display

• Badge / Card — Status and content containers
• Table / List — Data presentation
• Accordion / Tabs — Content organization
• Progress / Skeleton / Avatar / Kbd

Feedback

• Alert / Modal / Tooltip / Spinner
• Toast / Toaster — Notification system
• DropdownMenu / Popover / Drawer

Navigation

• Breadcrumb / Pagination / Sidebar
• CommandPalette — Spotlight-style search

Arcade Specialties

• CRTScreen — Retro monitor with scanlines
• PixelMascot — Animated pixel-art character
• ArcadeBadge — Build/test lane indicators
• StatusBar — Classic status bar
• Terminal — Dark terminal output
• GameCard — Arcade game container
• AsciiArt — Shadowed ASCII text
• Text / Heading — Typography with arcade fonts

Design Tokens

Colors

--win-gray: #c0c0c0;
--win-gray-light: #dfdfdf;
--win-gray-dark: #808080;
--win-gray-darker: #000000;
--win-blue: #000080;
--win-blue-light: #1084d0;
--arcade-cyan: #00ffff;
--arcade-pink: #ff00ff;
--arcade-yellow: #ffff00;
--arcade-green: #00ff00;
--arcade-red: #ff0000;

Fonts

• font-pixel — "Press Start 2P" for arcade headings
• font-terminal — "VT323" for retro text
• font-mono — "Fira Code" for code/data
• font-sans — System UI for body text

Border Style

All components use the classic Win98 3D border effect:

• n98-border-out — Raised (light top/left, dark bottom/right)
• n98-border-in — Sunken (dark top/left, light bottom/right)

Hooks

import { useToast, useDisclosure, useLocalStorage, useMediaQuery } from 'nostalgic98';

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const { toast } = useToast();
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const isMobile = useMediaQuery('(max-width: 768px)');

  return (
    <>
      <Button onClick={() => toast.success('Hello World!')}>Notify</Button>
      <Button onClick={onOpen}>Open Modal</Button>
      <Modal open={isOpen} onClose={onClose} title="Example">
        Content here
      </Modal>
    </>
  );
}

Customization

Override CSS custom properties in your own stylesheet:

:root {
  --win-blue: #your-custom-blue;
  --arcade-cyan: #your-custom-cyan;
}

Or extend Tailwind theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'win-blue': '#your-custom-blue',
      },
    },
  },
};

License

MIT