Windows 95 UI Components in React | React UI Library for Windows 95

A React UI component library that brings the Windows 95 experience to your application.

Available UI Components:

Anchor
AppBar
Avatar
Bar
Button
Checkbox
ColorInput
Cutout
DatePicker
Divider
Fieldset
Hourglass
List
ListItem
LoadingIndicator
NumberField
Panel
Progress
Radio
Select
Slider
SwitchBase
Tab
TabBody
Table
TableBody
TableDataCell
TableHead
TableHeadCell
TableRow
Tabs
TextField
Toolbar
Tooltip
Window
WindowContent
WindowHeader

Install & Import:

# Yarn
$ yarn add react95 styled-components

# NPM
$ npm i react95 styled-components --save// required
import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

// UI components
import { styleReset, List, ListItem, Divider } from 'react95';

// Theme
import original from "react95/dist/themes/original";

// Windows95 font (optional)
import ms_sans_serif from "react95/dist/fonts/ms_sans_serif.woff2";
import ms_sans_serif_bold from "react95/dist/fonts/ms_sans_serif_bold.woff2";

Basic Usage:

const GlobalStyles = createGlobalStyle`
  @font-face {
    font-family: 'ms_sans_serif';
    src: url('${ms_sans_serif}') format('woff2');
    font-weight: 400;
    font-style: normal
  }
  @font-face {
    font-family: 'ms_sans_serif';
    src: url('${ms_sans_serif_bold}') format('woff2');
    font-weight: bold;
    font-style: normal
  }
  body {
    font-family: 'ms_sans_serif';
  }
  ${styleReset}
`;
const App = () => (
  <div>
    <GlobalStyles />
    <ThemeProvider theme={original}>
      <List>
        <ListItem>List Item 1</ListItem>
        <ListItem>List Item 2</ListItem>
        <Divider />
        <ListItem disabled>List Item 3</ListItem>
      </List>
    </ThemeProvider>
  </div>
);
export default App;