JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    🌈🕹 Refreshed Windows 95 style UI components for your React app
    Filed under 

    • 🔾63%Overall
    • 4,119
    • 2.4 days
    • 🕩114
    • 👥6

    React95

    NPM circleCI build React95 version React95 license React95 license

    Components - Demo app - Website - Slack - PayPal donation 💰

    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 i 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 { styleReset, List, ListItem, Divider } 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`
      @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>🎤 Sing</ListItem>
            <ListItem>💃🏻 Dance</ListItem>
            <Divider />
            <ListItem disabled>😴 Sleep</ListItem>
          </List>
        </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 ♥️

    Show All