Guide · Open source
How to use 98.css: install and build Windows 98 style UIs
Updated · written with AI from the project's own documentation and checked against our catalogue data
98.css is a free, MIT-licensed CSS file that styles standard HTML elements so they look like classic Windows 98 windows, dialogs and buttons. This guide shows you how to add it to a page, write a basic window, and where to go for component details. It is aimed at web developers, designers and anyone making a retro or novelty project.
98.cssjdan/98.css · ★ 11.6k · MIT Install options & downloads Quick start
- 1Choose an install method. Use the unpkg link for a quick start, or run npm install 98.css in a package-managed project.
- 2Add the stylesheet. Place a link tag pointing to https://unpkg.com/98.css in your HTML head.
- 3Create a window element. Add a div with the class window to hold the whole dialog.
- 4Add a title bar. Inside the window, add a title-bar div containing a title-bar-text div with your title.
- 5Add content. Place your content inside a window-body div, using standard HTML elements.
- 6Check the docs for components. Open the documentation page at jdan.github.io/98.css for buttons, dialogs and other components.
What 98.css does
98.css is a CSS file that takes semantic HTML and makes it look like the Windows 98 interface. It contains no JavaScript, so it can be used alongside any frontend framework you choose.
The project describes itself as a design system for building faithful recreations of old UIs.
Add 98.css to a page with unpkg
The easiest way to use 98.css is to import it from unpkg. Add a link tag to the head of your HTML document, as in the example below.
<link rel="stylesheet" href="https://unpkg.com/98.css" />Install 98.css with npm
You can also install 98.css from npm if your project uses a package manager. The README gives this command.
npm install 98.cssBuild a basic Windows 98 window
98.css styles ordinary elements by class name. A window is a div with the class window, containing a title-bar with a title-bar-text, and a window-body for content. The example below creates a dialog titled My First VB4 Program with a single paragraph.
Inline styles such as margin and width are only used here to position the example on the page. You can move them into your own stylesheet.
- window: the outer frame
- title-bar: the blue title strip
- title-bar-text: the text inside the title bar
- window-body: the content area
<div class="window" style="margin: 32px; width: 250px">
<div class="title-bar">
<div class="title-bar-text">
My First VB4 Program
</div>
</div>
<div class="window-body">
<p>Hello, world!</p>
</div>
</div>Use 98.css with React or vanilla JavaScript
The README links to a React example and a vanilla JavaScript example on CodeSandbox. Because 98.css is only CSS, the same class names work in either setup.
For the full list of components and their markup, use the documentation page linked from the README.
Work on 98.css itself
If you want to change the stylesheet, the main file is style.css. Run npm install first, then npm start to watch for changes and rebuild with live reload. A manual build with npm run build writes to the dist/ directory.
Bugs and feature ideas go to the GitHub issues page. The author welcomes pull requests, including from people new to open source.
- Install dependencies: npm install
- Watch and rebuild: npm start
- Manual build to dist/: npm run build
npm install
npm start
npm run buildWhat people use it for
- A retro-styled personal website or portfolio
- A Windows 98 style mockup for a design project
- A novelty or joke app with an old Windows look
- A dialog box prototype with OK and Cancel buttons
Frequently asked questions
How do I install 98.css?
The easiest method is to add a link tag pointing to https://unpkg.com/98.css in your HTML head. You can also run npm install 98.css, or download it from the releases page on GitHub.
Is 98.css free to use?
Yes. 98.css is released under the MIT license, as linked from the project's license section.
Does 98.css need JavaScript?
No. The project states that it does not ship with any JavaScript, so it works with any frontend framework or with plain HTML.
What do I need to use 98.css?
The README does not list any prerequisites. You include the stylesheet in a web page and use standard HTML elements with the provided class names.
What are alternatives to 98.css?
The README recommends XP.css, which mimics Windows XP, and 7.css, which mimics Windows 7. Choose one of these if you want a different Windows look.
Is 98.css accessible?
The README does not discuss accessibility, so do not assume it meets accessibility requirements. Test it yourself before using it in a public or production project.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use 98.css if you want a faithful Windows 98 look for a retro website, a design mockup or a novelty app, especially if you want a CSS-only stylesheet with no JavaScript. Pick a different tool if you need a modern, general-purpose UI kit or a framework with documented accessibility support.
Install options & downloads