windows-98-ui
v1.10.2
Published
React component library inspired by and using the css from [98.css](https://github.com/jdan/98.css) library for vanilla html
Downloads
609
Maintainers
Readme
windows-98-ui
React component library inspired by and using the css from 98.css library for vanilla html
Overview
windows-98-ui is a React component library that brings the nostalgic look and feel of Windows 98 to your modern web applications. It leverages the 98.css library to provide authentic styling.
View Components
You can view the components using this storybook link
Installation
npm install windows-98-uiUsage
Wrap your components in Win98Provider to scope all 98.css styles. This prevents the Windows 98 styles from leaking into the rest of your app.
import { Win98Provider, Button } from 'windows-98-ui';
function App() {
return (
<Win98Provider>
<Button label="OK" />
</Win98Provider>
);
}Win98Provider renders a <div class="win98"> container and injects the scoped styles into <head> when it mounts, removing them when it unmounts. You can place it at the top level of your app or around individual sections — only the content inside will be styled.
Optional className
You can pass a className to the provider to style the container:
<Win98Provider className="my-desktop">
<Button label="OK" />
</Win98Provider>Available components
| Component | Import |
|-----------|--------|
| Button | import { Button } from 'windows-98-ui' |
| CheckBox | import { CheckBox } from 'windows-98-ui' |
| Dropdown | import { Dropdown } from 'windows-98-ui' |
| TextBox | import { TextBox } from 'windows-98-ui' |
| Slider | import { Slider } from 'windows-98-ui' |
| TitleBar | import { TitleBar } from 'windows-98-ui' |
| Window | import { Window } from 'windows-98-ui' |
| WindowBody | import { WindowBody } from 'windows-98-ui' |
| Desktop | import { Desktop } from 'windows-98-ui' |
| TreeView | import { TreeView } from 'windows-98-ui' |
| Progress | import { Progress } from 'windows-98-ui' |
Local Development
To set up the project locally, follow these steps:
git clone <repo>
cd windows-98-ui
npm install
npm startChasnge Log
See the CHANGELOG.md file for details.
Contributing
Contributions are welcome! Please read our contributing guidelines to get started.
License
This project is licensed under the MIT License. See the LICENSE file for details.
