Windows 95 UI Components For Your React app

Author:arturbien
Views Total:18 views
Official Page:Go to website
Publish Date:August 13, 2020
License:MIT

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

You Might Be Interested In:

Leave a Reply