Retro UI Kit is a pixel-perfect HTML/CSS/JS component library inspired by CRT terminals, arcade machines, and early computing aesthetics. Drop in two files — no build tools, no npm, no webpack required — and start building interfaces with authentic retro character.

What's Included

25+ Ready-to-Use Components organized into six categories:

• Foundations — 12 color tokens (phosphor green, amber, cyan, red, purple and neutrals), 6 heading sizes + body typography, 4 divider variants, pixel box
• Inputs — Buttons in 7 variants and 5 sizes, form inputs, selects, textareas, checkboxes, radio buttons, ON/OFF toggles, range sliders
• Display — 5 card types (including stat and profile cards), badge system (6 outline + 4 solid + animated dot), removable chips, 4 alert types, progress bars in 5 colors and 3 sizes with animated stripes, striped/bordered/hover tables, avatars in 5 sizes with status indicators and groups, skeleton loading placeholders
• Navigation — Navbar, tab navigation, pill navigation, breadcrumb, pagination, dropdown menus, list groups
• Overlays — Modal dialogs, toast notifications (JS API), CSS-only tooltips
• Widgets — Accordion, 4 loader types, vertical event timeline, terminal/console widget, code block display, pricing comparison cards, hero banner with grid background, empty/404 state

3 Starter Templates — Dashboard, Landing Page, and Login/Auth page, ready to customize and ship

Features

• CRT Visual Effects — Scanlines, vignette, and phosphor glow effects (individually disableable)
• 3 Retro Fonts — Press Start 2P, VT323, Share Tech Mono (loaded via Google Fonts)
• CSS Custom Properties — All colors, fonts, and effects are overridable via CSS variables
• Zero Build Tools — Just link the CSS and JS files and start coding
• Lightweight — ~47 KB CSS + ~8 KB JS (minified)
• Responsive — Works on desktop, tablet, and mobile
• Full Documentation — Documented component reference page with code examples and a complete component showcase