A React components library with Win95 UI

React95 React95 is a component library inspired on the Windows 95 UI design. Installation React95 will be available via either npm and yarn. npm install @react95/core # or yarn add @react95/core Warning

Information

Category: React / UI Frameworks
Watchers: 17
Star: 3k
Fork: 119
Last update: Sep 25, 2023

Resource links

https://github.com/React95/React95

React95

React95 is a component library inspired on the Windows 95 UI design.

Packages

@react95/core	@react95/icons	@react95/clippy

Roadmap

You can see what we have in mind to put on React95 at our projects page.

Development

If you'd like to help us out with the project, we welcome contributions of all types! Check out our CONTRIBUTING.md for more details on how you can help make React95 amazing!

Awesome projects

Contributors

Thanks goes to these wonderful people (emoji key):

_{Allysson dos Santos}

_{Gabriel Daltoso}

_{Genny McDonagh}

_{André Loureiro}

This project follows the all-contributors specification. Contributions of any kind welcome!

6 Open More issues

Closed

refactor: export icons as individual components from @react95/icons

Big changes:

processIcons scripts now runs on build, generating all png files, React components, and the legacy big CSS file
React components for every icon in the set, allowing these to be individually imported
- Icon variants can be switched between using the variant attribute, e.g. <IconFolder variant="16x16_4"/> vs <IconFolder variant="32x32_4"/> for the size variants of the folder icon
- Icons sized with width and height attributes, so can be resized with inline styles or css classes
Removed all PNG files from Git, this makes .ico files to be the single source of truth for available icons
Removed .ico file that were double ups (some were declared with both - and _ separators)
Removed .ico files that couldn't render anything

BREAKING CHANGE: icons now need to be provided as components individually imported from @react95/icons

fix #235, #189

opened Mar 21, 2021 by kirkobyte 15

Closed

Add "types" declaration to package.json

Adds a "types" declaration to the package.json file so TS projects with this as a dependency can find the type declarations

opened Mar 9, 2021 by kirkobyte 14

Closed

Themes, borders and little bits

Hey there!

Due the needs of my project i couldnt extend or change React95 theme and elements in my project so i went down the rabbit hole of setting things in such a way that i could use different palettes and re-use colors in my app.

I've also created an addon for React95 storybook that changes the selected themes in the preview but as far as i can tell is not reflected in the recent storybook addition.

I've also corrected the shadows such that they are exactly like in windows95. Screenshots of windows95 that were used for reference are from this page: https://guidebookgallery.org/screenshots/win95

There are 2 distinct shadow patterns that i've discerned that aren't as others, these are scrollbars' and windows' borders but may also appear elsewhere. Some elements from original win95 do have different shadows from program to program though but these are usually custom elements.

Changes:

Theming

Theming via styled-components themes. I've also copied around 30 themes from original React95 project.
Border helpers in /shared-style/Border.tsx can be used to create win95 style borders. Comes in 2 styles: With border and :after with box-shadow and box-shadow only.

I've also exported types for styled-components theme used in theming so it can be re-used or extended in other styled-components projects. More on this in the Using with styled-components themes section.

Components

Button

shadows
added disabled Button look

Checkbox

shadows
tweaked label a bit so it centers with box better

Cursors

moved cursor logic to a styled-components helper function, can now be used in tandem with styled-components without the need for classes eg.

import styled from 'styled-components'
import Cursor from '@react95/core/shared-style/Cursor'

const componentWithCursor = styled.p`
  ${Cursor('auto')} // <-- Will add proper cursor properties
`

// ...

I left class definitions in global style as they were, just replaced them with calls to Cursor helper.

Divider

created a Divider component for horizontal breaks. Would be nice to have a vertical one as well.

Dropdown

borders
Replaced triangle image with an SVG generated element of a triangle.

Input

borders

Modal

This is probably the definitive element of this UI kit - the classic Windows95 style window. The shadows didn't match the original though so i fixed that by creating another component called Window meant only for Window background.

I've also tweaked the story examples a bit by adding content to them. I've moved the title bar to its own file, because i find it easer to compose components in my app if i can put together Frame + Title bar without the whole Modal functionality.

I've also switched the identifier of modals in ModalProvider from 'title' to 'id' that generates with each modal.

Panel

A Panel element, similar to Frame. Made in a way that adjoining panels do not have a double border. I didn't get the Frame element at first as it is so simplistic and mostly just xstyled-component bindings, so i made a more streamlined version.

I've also included 'as canvas' mode that creates a distinct different background for every theme, for example such as white color was used for areas with a lot of text;

By default all Panels are wrapped in another element because that is the only way to keep a double shadow in a scrolling container (box shadow will be rendered underneath the content scrolled. This can be disabled by setting isScrollable={false} prop.

Panels are by default display: flex and their direction attribute is used to determine how to merge shadows of inner Panels.

Progress Bar

borders

Tabs

borders

Taskbar

I've touched the story a bit and modded the elements to have colors of the themes. Also added some content to the windows in the story.

Textarea

borders

ThemeProvider

Accepts either string or DefaultTheme object on theme prop. By default it uses 'win95' theme (the default win95 look).

I've moved all the themes from javascrip React95 project and used the same structure for colors as it seemed a good system. I did however omit some of the properties that would never be used at this time.

All mentioned themes are in `/ThemeProvider/themes/, where baseTheme.tsx is also defined and holds everything else that all themes share (aka zIndices and other specifics).

Title Bar

Moved it out of the Modal so it can be reusable on a Window/Panel/Frame element without the Modal functionality - just for styling elements to look like win95 windows.

Window

A container element that has the same shadows as win95 did.

Using in another styled-components app

React95 theme (otherwise in core/types/theme.d.ts) is exported in the /dist/_types folder - i've tweaked the script to copy it on prepublishOnly step of the building so it gets packed with the components.

// ThemeDefinition.d.ts
import 'styled-components'
import { R95DefaultTheme } from '@react95/core/_types/theme'

declare module 'styled-components' {

  // your stuff

  export interface DefaultTheme extends R95DefaultTheme {
    // anything else you want in your theme
  }
}

You can then create own theme with one of the themes as a base (for R95 theme) so typescript is happy.

// my-theme.ts
import win95 from '@react95/core/ThemeProvider/themes/win95'
import { DefaultTheme } from 'styled-components'

const Theme: DefaultTheme = {
  ...win95,
  // your stuff here
}

export default Theme

and use your Theme provider normally with any other win95 theme

import { ThemeProvider } from 'styled-components'
import { GlobalStyle, ThemeProvider as R95ThemeProvider } from '@react95/core'
import Theme from '../your/custom/Theme'
const App = () => 
  <ThemeProvider theme={Theme}>
    your default R95 theme defined in Theme file
    <GlobalStyle />
      <R95ThemeProvider theme='rose'>
        // custom content with candy theme inside
      </R95ThemeProvider>
  </ThemeProvider>

Here shown: win95 in the header in conjunction with rose theme for 'windows' elements:

Other

There may be some refactorings i forgot to mention because they slip my mind at this time. I've worked on this for the past month on weekends and pasttime and didnt commit as much as i should so there are a lot of changes in the first commits when i was preparing the terrain. I have removed some of the @xstyled-components code as it was feeling odd to me at the time. I've refrained from it later and made elements around that, but this may cause some style breaking an xstyled app.

opened Nov 23, 2020 by belakm 14

Closed

Create showcase area in README.md

This idea came from @ggdaltoso on Twitter.

The purpose is show to other developers cases of apps and websites that use the React95 library.

opened Jun 2, 2020 by kaiofelipejs 11

Closed

Error found to run the project using Next.js

Ei, everyone!

The error happens whenever execute the project, running the command yarn dev.

At execute command yarn dev an error is return, conform image bellow.

The configuration to using the @React95 with Next.js was made at archive next-config.

Same with configuration the error happens.

opened Apr 23, 2021 by felipsbreno 10

Closed

NextJS - Global CSS cannot be imported from within node_modules

error - ./node_modules/@react95/icons/icons.css Global CSS cannot be imported from within node_modules. Read more: https://err.sh/next.js/css-npm Location: node_modules/@react95/core/ThemeProvider/ThemeProvider.js

opened Jan 7, 2021 by mctang719 10

Open

can not use in latest nextjs (13.4.19)

I have done based on the intro: https://github.com/React95/React95/tree/master/packages/core#nextjs

and add some code for styled-components based on this: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components

at last error this:

styled-component version problem? nextjs support v6, but react95 v5 ?

opened Sep 9, 2023 by zerosoul 1

Open

Add DropdownCustom component

I decided to create a new dropdown component using custom designed options instead of the browser native <option>. As the styles and logic differ quite a lot, I opted to make this a new component and not unify with the existing Dropdown.

Any feedback welcome 💪

New component

Actual OS

Possible Next Steps

better test coverage?
Storybook controls, actions?
rename Dropdown to Select and DropdownCustom to Dropdown?
utilize PropsWithHTMLAttributes across the codebase?

@react95/core @react95/icons

opened Oct 7, 2021 by henckellbach 5

Open

Wrong font

As we can easily see in 95Recipes the font family provided from React95 is not the right one, since it does not support Latin characters:

To find this font file I did a lot of research but apparently I should have done a better job 😂

Researching again, I found some fonts that seem to be the one used in w95, but it is not quite right (in my opinion).

So I've decided to find the original and try to add it to the 95. And, good news, I found it!

But...

It is in .fon file format.

SERIFF.FON.zip

This zip file contains the MSSans font used in w95.

Opening this file font in FontForge software, I've discovered that this is a bitmap font, containing different fonts for different sizes: 13px, 17px, 20px, 23px, 30px and 40px). To illustrate the different fonts, I've printed several "@" characters:

The 13px font seems to be ok for me to add to React95 as the default font (body):

I don't know how to extract it and generate the .ttf, .woff or .woff2 file formats to be used inside React95.

I would appreciate it if someone could help me with this.

help wanted

opened Jun 20, 2020 by ggdaltoso 6

Open

New Modals

Since we have different types of windows opening inside the w95, we could add then into @React95/core as Compounds of Modal Component.

What it comes into my mind is:

Modal.IE (good to show iframes like mentioned in #148)

Modal.WordPad

** We probably would need to add more icons

opened Jun 5, 2020 by ggdaltoso 6

Open

add defaultValue and value props support for some form like components

add defaultValue and value props support for some form like components so that we can control the components switch between controlled and uncontrolled. it was used by some popular UI library like Material UI and antd. I have written a tiny module (rc-value) to illustrate this pattern.

opened Apr 20, 2019 by beizhedenglong 0

Open

Update storybook UI

null

opened Jun 23, 2018 by ggdaltoso 9

@react95/[email protected](Aug 13, 2023)

6.1.3 (2023-08-13)

Note: Version bump only for package @react95/core

Source code(tar.gz)
Source code(zip)

@react95/[email protected](Aug 13, 2023)

1.0.11 (2023-08-13)

Note: Version bump only for package @react95/clippy

Source code(tar.gz)
Source code(zip)

@react95/[email protected](Jul 29, 2023)

6.1.2 (2023-07-29)

Bug Fixes

core: disable overflow when using GlobalStyle (c512a80)

Source code(tar.gz)
Source code(zip)

@react95/[email protected](Jul 4, 2023)

2.0.7 (2023-07-04)

Note: Version bump only for package @react95/icons

Source code(tar.gz)
Source code(zip)

@react95/[email protected](Jul 4, 2023)

6.1.1 (2023-07-04)

Note: Version bump only for package @react95/core

Source code(tar.gz)
Source code(zip)

@react95/[email protected](Jul 3, 2023)

6.1.0 (2023-07-03)

Bug Fixes

making storybook working (f12d281)

Features

add positionOffset to Modal component (52d88c4)

Source code(tar.gz)
Source code(zip)

typecho theme win95 modify

React UI components powered by Tachyons with a styled-components like API

Material Components Vue material-components-webMaterial Components Vue - wrapper around material-components-web for Vue.js

Layout Components for React based on Flexbox

A collection of reusable React components with their own Flux lifecycle.

Create microservice apps with React components

React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Responsive Bootstrap 4 windows 95/98 theme & landing template

React Native APIs turned into React Hooks for use in functional React components

Material design components written with React.js and React Style

Teleport React components in the same React tree 📡

Create flexible layout and composite UI components without the need to define arbitrary custom props

Render React components like a Modal outside the main React app

Set of React components that use the Web Speech API to bring voice experience to React applications

React Dashboard made with Material UI’s components, React and of course create-react-app to boost your app development process!

☄️React Material Admin is a React template built with Material-UI

Tailwind Mobile - Pixel perfect mobile UI components built with Tailwind CSS with iOS and Material Design components for React, Vue & Svelte

Component library for making games with React & React Native

React UIkit Components for the UIKit CSS framework

A new way of Function Components without Hooks

pile.js components build with React.

Share this repo

Related Repos

UI Frameworks

Semi-UI: A modern, comprehensive, flexible design system and UI library. Quickly build be...

Semi-UI: A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps.

UI Frameworks

113

React mobile UI Components base on Vant

UI Frameworks

112

A React UI Kit based on Tailwind

UI Frameworks

Collection of Accessible React UI Components using TailwindCSS.

Collection of accessible React UI components with the built-in dark theme using Tailwind CSS. Pre-designed headless ui and radix-ui.

UI Frameworks

246

A React Component library for building modern applications easily & quickly

UI Frameworks

Embrace - Typesafe, declarative, and composable UI engine on top of React and Focal

UI Frameworks

🛠 React application framework based on Vite.

🚀 React application framework inspired by UmiJS. 类 UmiJS 的 React 应用框架。

UI Frameworks

A supa simple wrapper around Supabase.js to enable usage within Nuxt.

UI Frameworks

Peco: The featherweight Deno webapp framework. Built with Preact and htm.

UI Frameworks

A collection of Chakra UI-related awesomeness

UI Frameworks

122

A React.js admin dashboard template and UI library based on Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

UI Frameworks

802

Build your own chat UI with React components in few minutes.

Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.

UI Frameworks

145

A collection of Responsive Animated Mobile friendly Lightweight React Components

UI Frameworks

Mobile UI Components built on React

富能通移动端组件库（agile mobile） —— 一个灵活、精巧的react移动端组件库

UI Frameworks

☁ Layer Components - Dialogs, Drawers, Tooltips, Popovers

Layer Components for React: Dialogs, Drawers, Tooltips and Popovers