A React UI component library that brings the Windows 95 experience to your application.
See Also:
- Windows 98 CSS Framework – 98.css
- Windows XP CSS Framework – XP.css
- Windows 95 Theme For Bootstrap 4 – Win95.css
Available UI Components:
- Anchor
- AppBar
- Avatar
- Bar
- Button
- Checkbox
- ColorInput
- Cutout
- DatePicker
- Divider
- Fieldset
- Hourglass
- List
- ListItem
- LoadingIndicator
- NumberField
- Panel
- Progress
- Radio
- Select
- Slider
- SwitchBase
- Tab
- TabBody
- Table
- TableBody
- TableDataCell
- TableHead
- TableHeadCell
- TableRow
- Tabs
- TextField
- Toolbar
- Tooltip
- Window
- WindowContent
- WindowHeader
Install & Import:
# Yarn $ yarn add react95 styled-components # NPM $ npm i react95 styled-components --save
// required import React from 'react'; import { createGlobalStyle, ThemeProvider } from 'styled-components'; // UI components import { styleReset, List, ListItem, Divider } from 'react95'; // Theme import original from "react95/dist/themes/original"; // Windows95 font (optional) 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";
Basic Usage:
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>List Item 1</ListItem> <ListItem>List Item 2</ListItem> <Divider /> <ListItem disabled>List Item 3</ListItem> </List> </ThemeProvider> </div> ); export default App;
Previews:
Download Details:
Author: arturbien
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/arturbien/React95
License: MIT