https://github.com/bensimmers/windows-98-ui

https://github.com/bensimmers/windows-98-ui

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/bensimmers/windows-98-ui
• Owner: BenSimmers
• Created: 2024-07-27T14:08:23.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-11-13T10:08:58.000Z (about 2 months ago)
• Last Synced: 2024-11-13T10:33:48.986Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/windows-98-ui
• Size: 185 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

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

## 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

```

## Local Development

```bash

git clone 

```

```bash

cd windows-98-ui

```

```bash

npm install

```

## Usage

windows-98-ui is a collection of React components that can be used to build a Windows 98 inspired UI. One cool feature about this library is that we can use the components as they are or extend them to create other components without having to worry about the styling or adding extra code.

e.g. we use a the `as` prop to override the default HTML tag of a component.

```jsx

import { TextBox } from 'windows-98-ui';

// we can override the default HTML tag of the TextBox component to use a different HTML tag or another React component.

```

### Button

The Button component is a simple button that can be used to trigger an action. The windows-98-ui library provides a Button component which extends the native button element. The Button component can be used to create a button with a label and a disabled state.

```jsx

import { Button } from 'windows-98-ui';

// Base

// Disabled

```

### Dropdown

The Dropdown component is a simple dropdown that can be used to select an option from a list. The windows-98-ui library provides a Dropdown component which extends the native select element. The Dropdown component can be used to create a dropdown with a list of options.

```jsx

import { Dropdown } from 'windows-98-ui';

;

// as prop is an override of the default HTML tag. Can also be another React component.

;

```

### Slider

The Slider component is a simple slider that can be used to select a value from a range. The windows-98-ui library provides a Slider component which extends the native input element. The Slider component can be used to create a slider with a range of values.

```jsx

import { Slider } from 'windows-98-ui';

;

```

### TextBox

The TextBox component is a simple text box that can be used to input text. The windows-98-ui library provides a TextBox component which extends the native input element. The TextBox component can be used to create a text box with a placeholder and a value.

```jsx

import { TextBox } from 'windows-98-ui';

;

```