Description:
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:
