Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/react95-io/React95

🌈🕹 Windows 95 style UI component library for React
https://github.com/react95-io/React95

component-library components design-system react reactjs styled-components ui ui-kit vaporwave windows95

Last synced: about 1 month ago
JSON representation

🌈🕹 Windows 95 style UI component library for React

Lists

README 

        
React95





  NPM

  release status

  React95 version

  React95 license

  React95 license





  Components -

  Demo app -

  React Native -

  Slack -

  PayPal donation 💰





  Refreshed Windows95 UI components for your modern React apps. 
 Built with styled-components 💅



![hero](https://user-images.githubusercontent.com/28541613/81947711-28b05580-9601-11ea-964a-c3a6de998496.png)



### Support



- [Become a backer or sponsor on Patreon](https://www.patreon.com/arturbien)

- [One-time donation via PayPal](https://www.paypal.me/react95)



## Getting Started



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



```sh

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



```jsx

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 = () => (

  


    

    

      

        🎤 Sing

        💃🏻 Dance

        

        😴 Sleep

      

    

  


);



export default App;

```



### Submit your project



Apps built with React95 will be featured on the official React95 [website](https://react95.io) 🤟🏻



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