A lightweight, hackable GUI kit with a Windows 95/98 soul. Zero dependencies. Pure HTML, CSS, and vanilla JavaScript.
- Hard, chiseled edges – no rounded corners, just sharp 3D bevels.
- 3‑tier color system – clear visual hierarchy for tabs and surfaces.
- Mechanical feedback – buttons and controls
translateon press, mimicking physical switches. - Dark / Light mode – toggle with a single click, persists via
localStorage. - Scroll‑Spy Sidebar – auto‑highlights the section you're viewing.
- Rich component library:
- Buttons (Default, Primary, Success, Danger)
- Cards, Tags, Badges
- Spinners & Progress bars
- Dropdowns, Modals, Toasts
- Forms (Inputs, Select, Checkboxes, Radios)
- Toggle Switch (physical slider)
- Breadcrumbs, Pagination
- Code Blocks (
Courier New) - Tabs (3‑tier active state)
- Tables
- Context Menu (right‑click)
npm install webui98Then import into your project:
<link rel="stylesheet" href="node_modules/webui98/webui98.css" />
<script src="node_modules/webui98/webui98.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/webui98/webui98.css" />
<script src="https://cdn.jsdelivr.net/npm/webui98/webui98.js"></script>Or just copy the HTML structure from the demo page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My WebUI98 App</title>
<link rel="stylesheet" href="webui98.css" />
</head>
<body>
<!-- Header -->
<header class="app-header">
<div class="title">
<span class="icon">🖥️</span>
<span>My App</span>
</div>
<div class="header-controls">
<button class="win-btn" id="themeToggle">🌓</button>
<button class="win-btn close">✕</button>
</div>
</header>
<hr class="flatline" />
<!-- Sidebar -->
<nav class="sidebar">
<div class="nav-title">📂 Menu</div>
<a href="#section1" class="active">Section 1</a>
<a href="#section2">Section 2</a>
</nav>
<!-- Content -->
<main class="content">
<section id="section1">
<h2>Hello, WebUI98!</h2>
<button class="btn btn-primary" onclick="showToast('Hello!', 'success')">
Click Me
</button>
</section>
</main>
<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>
<script src="webui98.js"></script>
</body>
</html>Override the CSS variables in your own stylesheet:
:root {
--accent: #ff6600; /* your brand color */
--header-bg-start: #1a1a2e;
--header-bg-end: #16213e;
--surface: #f4f4f4;
/* ... etc */
}Pull requests are welcome! Please keep the zero‑dependency rule and maintain the hard‑edged, 95/98 aesthetic.
MIT ©
- Built for the classic Windows interface.
- Fonts: Tahoma (UI) and Courier New (code).