https://github.com/bensimmers/windows-98-ui
windows 98 inspired react component library
https://github.com/bensimmers/windows-98-ui
Last synced: about 1 month ago
JSON representation
windows 98 inspired react component library
- Host: GitHub
- URL: https://github.com/bensimmers/windows-98-ui
- Owner: BenSimmers
- License: mit
- Created: 2024-07-27T14:08:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-27T00:56:59.000Z (10 months ago)
- Last Synced: 2025-08-12T16:50:34.283Z (10 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/windows-98-ui
- Size: 328 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# windows-98-ui
React component library inspired by and using the css from [98.css](https://github.com/jdan/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](https://github.com/jdan/98.css) library to provide authentic styling.
## View Components
You can view the components using this storybook [link](https://bensimmers.github.io/windows-98-ui/)
## Installation
```bash
npm install windows-98-ui
```
## Usage
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.
```jsx
import { Win98Provider, Button } from 'windows-98-ui';
function App() {
return (
);
}
```
`Win98Provider` renders a `
` container and injects the scoped styles into `` 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:
```jsx
```
### 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:
```bash
git clone
cd windows-98-ui
npm install
npm start
```
## Chasnge Log
See the [CHANGELOG.md](CHANGELOG.md) file for details.
## Contributing
Contributions are welcome! Please read our [contributing guidelines](CONTRIBUTING.md) to get started.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.