Skip to content
forked from react95-io/React95

πŸŒˆπŸ•Ή Windows 95 style UI component library for React

License

Notifications You must be signed in to change notification settings

casepot/React95

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React95

NPM release status React95 version React95 license React95 license

Refreshed Windows95 UI components for your modern React apps.
Built with styled-components πŸ’…

hero

Support

Getting Started

First, install component library and styled-components in your project directory:

# yarn
$ yarn add react95 styled-components

# npm
$ npm install react95 styled-components

Apply style reset, wrap your app with ThemeProvider with theme of your choice... and you are ready to go! πŸš€

import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';

import { MenuList, MenuListItem, Separator, styleReset } from 'react95';
// pick a theme of your choice
import original from 'react95/dist/themes/original';
// original Windows95 font (optionally)
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';

const GlobalStyles = createGlobalStyle`
  ${styleReset}
  @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';
  }
`;

const App = () => (
  <div>
    <GlobalStyles />
    <ThemeProvider theme={original}>
      <MenuList>
        <MenuListItem>🎀 Sing</MenuListItem>
        <MenuListItem>πŸ’ƒπŸ» Dance</MenuListItem>
        <Separator />
        <MenuListItem disabled>😴 Sleep</MenuListItem>
      </MenuList>
    </ThemeProvider>
  </div>
);

export default App;

Submit your project

Apps built with React95 will be featured on the official React95 website 🀟🏻

Contributing

Any help from UI / UX designers would be EXTREMELY appreciated. The challenge is to come up with new component designs / layouts that are broadly used in modern UIs, that weren't present back in 95.

If you want to help with the project, feel free to open pull requests and submit issues or component proposals. Let's bring this UI back to life β™₯️

About

πŸŒˆπŸ•Ή Windows 95 style UI component library for React

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.8%
  • JavaScript 1.1%
  • CSS 0.1%