📟 Intro · Typography Tahoma

A zero‑import UI library with hard, chiseled edges and a Windows 95/98 soul. All components are built with Tahoma — a font that defined an era.

H1 Heading

H2 Heading

H3 Heading

A paragraph with a link.

List item one
List item two

💡 Pro tip: Right‑click anywhere to summon the custom context menu.

📦 Install via npm


                    npm install webui98

Then import webui98.css and webui98.js into your project.

🔘 Buttons mechanical press

Standard

States

🃏 Cards raised

📦 Classic Card

Raised borders, subtle shadow, and that retro system font.

⚙️ Settings

This card uses the alternate surface color.

🏷️ Tags

Default Primary Success Danger Warning Neutral

⏳ Spinners & Loaders

Spinner

Progress (60%)

📂 Dropdowns

Click to toggle. Click outside to close.

🟦 Modals spring pop

🍞 Toasts slide & stack

Slide in from bottom‑right. Auto‑dismiss after 3.5s.

📝 Forms sunken inputs

Text Input:

Email:

Select:

Textarea:

Enable Yes No

🔘 Toggle Switch physical slider

Off On Dark Mode

Springy mechanical feel.

📂 Breadcrumbs explorer style

Classic Windows Explorer‑style breadcrumb.

📊 Pagination mechanical

Chunky buttons with the same mechanical press.

📄 Code Blocks Courier New

// WebUI98 — Modern Classic
        // Zero imports, pure Tahoma & Courier New

        function initUI() {
            const theme = localStorage.getItem('webui-theme') || 'light';
            applyTheme(theme);
            console.log('🖥️ WebUI98 ready.');
        }

        initUI();

Sunken, dark panel using Courier New.

📑 Tabs 3‑tier distinction

Readme: Built with zero imports. Pure HTML, CSS, and vanilla JS.

Settings: Toggle dark mode in the header.

Logs: [OK] System ready. [OK] Tahoma loaded.

Active tab sits visually between darker inactive tabs and lighter content.

📊 Tables raised headers

Component	Status	Added
Buttons	✅ Ready	v1.0
Modals	✅ Ready	v1.0
Toasts	✅ Ready	v1.0
Toggle Switch	✅ Ready	v2.0
Context Menu	✅ Ready	v2.0