Getting Started

Win2k UI is a reusable React component library that implements the classic Windows 2000 aesthetic. Built with Next.js, TypeScript, and Tailwind CSS 4 — zero third-party UI dependencies.

Installation

Install the package via npm:

npm install win2k-ui

Make sure you have Tailwind CSS v4 set up in your project, then add the Win2k theme to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

That’s it — no extra plugins, no theme config, no font imports. The CSS import sets up the full Win2k color palette, bevel utilities, Tahoma font stack, and scrollbar styling.

Usage

Import any component from the barrel export:

import { WinButton, WinBox, WinTitleBar } from 'win2k-ui'

export function MyComponent() {
  return (
    <WinBox>
      <WinTitleBar title="My App" />
      <p className="p-2">Hello from Win2k UI!</p>
      <div className="flex gap-2 p-2">
        <WinButton onClick={() => alert('OK')}>OK</WinButton>
        <WinButton onClick={() => alert('Cancel')}>Cancel</WinButton>
      </div>
    </WinBox>
  )
}

Components

The library provides 22 components, organized by category:

Component	Category	Client?
WinBox	Container	No
WinCard	Container	No
WinGroupBox	Container	No
WinButton	Form	No
WinCheckbox	Form	Yes
WinInput	Form	No
WinListBox	Form	Yes
WinRadio	Form	Yes
WinSelect	Form	No
WinSlider	Form	Yes
WinToggle	Form	Yes
WinBadge	Display	No
WinProgressBar	Display	No
WinTable	Display	No
WinGrid	Layout	No
WinSectionHeader	Layout	No
WinSeparator	Layout	No
WinStatusBar	Layout	No
WinTitleBar	Layout	No
WinMenuBar	Navigation	No
WinTabs	Navigation	Yes
WinDialog	Overlay	Yes

Design Principles

Bevel Borders, Not Shadows

Depth is created using multi-color borders (raised: white top/left, dark bottom/right; sunken: inverted) rather than box-shadows. The only exception is WinDialog which uses a drop shadow.

Sharp Corners

No rounded corners. Win2k had pixel-perfect sharp corners on every element — buttons, inputs, dialogs, and containers.

Tahoma Typography

All text uses Tahoma (fallback: MS Sans Serif) at 13px body size. No custom fonts, no Google Fonts, no webfonts.

SSR-First

Components are Server Components by default. Only WinDialog (drag), WinToggle (click), and docs previews use client-side interactivity.