Windows 95 UI Components For Your React app

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

See Also:

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;

Previews:

Windows 95 UI components For Your React app

Windows 95 UI components For Your React app

Windows 95 UI Date Picker

Windows 95 UI Date Picker

Download Details:

Author: arturbien

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/arturbien/React95

License: MIT

You Might Be Interested In:

Add Comment