https://github.com/retro-react/retro-react
React UI library based on 90s website era
https://github.com/retro-react/retro-react
90s library react ui vintage
Last synced: 10 months ago
JSON representation
React UI library based on 90s website era
- Host: GitHub
- URL: https://github.com/retro-react/retro-react
- Owner: retro-react
- License: mit
- Created: 2023-01-25T21:00:52.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-10T08:32:26.000Z (over 1 year ago)
- Last Synced: 2025-03-24T03:35:27.113Z (10 months ago)
- Topics: 90s, library, react, ui, vintage
- Language: TypeScript
- Homepage: https://retro-react.github.io/retro-react/?path=/docs/overview-introduction--docs
- Size: 19.8 MB
- Stars: 36
- Watchers: 0
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# React Retro UI Library
[](https://www.npmjs.com/package/retro-react)
[](https://www.npmjs.com/package/retro-react)
React Retro UI Library is a retro-themed UI library for React that offers a unique set of over 20 components to help you effortlessly build nostalgic user interfaces. The library includes components such as buttons, containers, inputs, boxes, cards, text, modals, progress bars, chips, and alerts, among others.
There are also some unique components such as the `MouseTrail` component, which creates a trail of mouse cursors that follow the user's mouse movements, `PixelatedImage`, which pixelates an image, and many more. Additional components can be found in the demo.
The library is in it's early stages, so there are still many components to be added. Suggestions are always welcome, so feel free to open an issue [here](https://github.com/retro-react/retro-react).
For detailed changes between versions, please refer to the github [releases](https://github.com/retro-react/retro-react/releases) page. Stay tuned for frequent updates!
## Demo
Explore the [demo](https://retro-react.github.io/retro-react/?path=/docs/overview-introduction--docs/) of the library to see all the components in action.
## Installation
You can install the `retro-react` package using npm or yarn:
```bash
npm install retro-react
```
or
```bash
yarn add retro-react
```
## Usage
You can import the components from the retro-react package and use them in your React application as follows:
```jsx
import React from 'react';
import {
Alert,
Box,
Button,
Card,
Chip,
Container,
Input,
Modal,
ProgressBar,
Text,
} from 'retro-react';
const App = () => {
return (
Click me
{/* Your content here */}
Box content
{/* Card content */}
Hello, world!
{/* Modal content */}
Chip
{/* Alert content */}
);
};
export default App;
```
## Components
Please refer to the [demo](https://retro-react.github.io/retro-react/?path=/docs/overview-introduction--docs/) for a complete list of components and their props.
## Global styles
Every component in React Retro UI has a `retro-ui` class name attached. This makes it easy to apply global styling to all components. For instance, you can change the font family of all components by adding the following CSS to your main stylesheet:
```css
.retro-ui {
font-family: 'Roboto', sans-serif !important;
}
```
## `sx` prop
All components in React Retro UI support the `sx` prop, which allows you to add custom styles to the component. The `sx` prop accepts an object with CSS properties and values. For more information on the `sx` prop, please refer to the [documentation](https://theme-ui.com/sx-prop).
```jsx
Click me
Hello, world!
{/* Your content here */}
```
## Styling
Emotion is used for styling the components. You can create your own components by using the `styled` function from Emotion or use the theme values using the `useTheme` hook. For more information on styling, please refer to this [documentation](https://emotion.sh/docs/styled).
```jsx
import React from 'react';
import { styled, useTheme } from 'retro-react';
const StyledButton = styled('button')`
background-color: ${(props) => props.theme.colors.primary};
color: ${(props) => props.theme.colors.white};
`;
```
## License
This project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/).
## Contributing
Contributions are welcome! People who want to contribute to this project can open an issue or submit a pull request [here](https://github.com/retro-react/retro-react). If you are dedicated to contributing to this project, you can also contact me there.