🌈🕹为您的现代React应用更新了Windows95 UI组件
🌈🕹为您的现代React应用更新了Windows95 UI组件
React UI框架
共4027Star
详细介绍
React95
Components - Website - Slack - PayPal donation
💰
Refreshed Windows95 UI components for your modern React apps.
Built with styled-components
Support
Motivation
Create modern mobile/web applications with the retro and old school Windows 95 style. Our goal is not to exactly recreate Windows95 components, but to provide a solid component library for current scenarios.
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 content with ThemeProvider with theme of your choice... and you are ready to go!
import React from 'react';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { reset, themes, List, ListItem, Divider } from 'react95';
const ResetStyles = createGlobalStyle`
${reset}
`;
const App = () => (
<div>
<ResetStyles />
<ThemeProvider theme={themes.default}>
<List>
<ListItem>🎤 Sing</ListItem>
<ListItem>💃🏻 Dance</ListItem>
<Divider />
<ListItem disabled>😴 Sleep</ListItem>
</List>
</ThemeProvider>
</div>
);
export default App;
Explore
You can view components on Storybook. If you want to play with it locally, simply clone the repo and run commands below:
# yarn
$ yarn && yarn storybook
# npm
$ npm i && npm run storybook
Submit your project
Apps built with React95 will be submitted 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.
There's a lot to do. If you want to help with the project, feel free to open pull requests and submit issues. Let's make UI great again
Roadmap
There's quite a few things to be done:
- Styled system
- Lots of tacky color schemes
🌈 - Custom icons maybe? (Emojis from Windows 10 seem to go very well with the lib)
- Typography
- Range slider component
- Avatar component
- Components common in all modern UIs (FAB, Badge, Avatar, Snackbar, Steppers)
And the boring stuff too:
- Testing
- Semantic release
-
176 Star
-
0 Star
-
2971 Star
-
27 Star
-
316 Star
-
4604 Star
-
407 Star
-
1238 Star