{"id":23512635,"url":"https://github.com/retro-react/retro-react","last_synced_at":"2025-04-19T12:17:20.316Z","repository":{"id":154123564,"uuid":"593371114","full_name":"retro-react/retro-react","owner":"retro-react","description":"React UI library based on 90s website era","archived":false,"fork":false,"pushed_at":"2024-07-10T08:32:26.000Z","size":20712,"stargazers_count":36,"open_issues_count":2,"forks_count":3,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-24T03:35:27.113Z","etag":null,"topics":["90s","library","react","ui","vintage"],"latest_commit_sha":null,"homepage":"https://retro-react.github.io/retro-react/?path=/docs/overview-introduction--docs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/retro-react.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-25T21:00:52.000Z","updated_at":"2025-03-20T10:45:31.000Z","dependencies_parsed_at":"2023-05-09T15:24:37.445Z","dependency_job_id":"558f99de-8192-4e7a-a371-953b6ecb07c5","html_url":"https://github.com/retro-react/retro-react","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retro-react%2Fretro-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retro-react%2Fretro-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retro-react%2Fretro-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/retro-react%2Fretro-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/retro-react","download_url":"https://codeload.github.com/retro-react/retro-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249692828,"owners_count":21311419,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["90s","library","react","ui","vintage"],"created_at":"2024-12-25T13:18:07.369Z","updated_at":"2025-04-19T12:17:20.297Z","avatar_url":"https://github.com/retro-react.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Retro UI Library\n\n[![npm version](https://badge.fury.io/js/retro-react.svg)](https://www.npmjs.com/package/retro-react)\n[![npm license](https://img.shields.io/npm/l/retro-react.svg)](https://www.npmjs.com/package/retro-react)\n\nReact 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.\n\nThere 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.\n\nThe 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).\n\nFor detailed changes between versions, please refer to the github [releases](https://github.com/retro-react/retro-react/releases) page. Stay tuned for frequent updates!\n\n## Demo\n\nExplore the [demo](https://retro-react.github.io/retro-react/?path=/docs/overview-introduction--docs/) of the library to see all the components in action.\n\n## Installation\n\nYou can install the `retro-react` package using npm or yarn:\n\n```bash\nnpm install retro-react\n```\n\nor\n\n```bash\nyarn add retro-react\n```\n\n## Usage\n\nYou can import the components from the retro-react package and use them in your React application as follows:\n\n```jsx\nimport React from 'react';\nimport {\n\tAlert,\n\tBox,\n\tButton,\n\tCard,\n\tChip,\n\tContainer,\n\tInput,\n\tModal,\n\tProgressBar,\n\tText,\n} from 'retro-react';\n\nconst App = () =\u003e {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cButton\u003eClick me\u003c/Button\u003e\n\t\t\t\u003cContainer\u003e{/* Your content here */}\u003c/Container\u003e\n\t\t\t\u003cInput placeholder=\"Enter text\" /\u003e\n\t\t\t\u003cBox\u003eBox content\u003c/Box\u003e\n\t\t\t\u003cCard header=\"Header\" footer=\"Footer\"\u003e\n\t\t\t\t{/* Card content */}\n\t\t\t\u003c/Card\u003e\n\t\t\t\u003cText variant=\"h1\"\u003eHello, world!\u003c/Text\u003e\n\t\t\t\u003cModal open={true}\u003e{/* Modal content */}\u003c/Modal\u003e\n\t\t\t\u003cProgressBar value={50} /\u003e\n\t\t\t\u003cChip color=\"primary\"\u003eChip\u003c/Chip\u003e\n\t\t\t\u003cAlert open={true} color=\"success\"\u003e\n\t\t\t\t{/* Alert content */}\n\t\t\t\u003c/Alert\u003e\n\t\t\u003c/div\u003e\n\t);\n};\n\nexport default App;\n```\n\n## Components\n\nPlease 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.\n\n## Global styles\n\nEvery 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:\n\n```css\n.retro-ui {\n\tfont-family: 'Roboto', sans-serif !important;\n}\n```\n\n## `sx` prop\n\nAll 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).\n\n```jsx\n\u003cButton sx={{ backgroundColor: 'red' }}\u003eClick me\u003c/Button\u003e\n\u003cText sx={{ color: 'blue' }}\u003eHello, world!\u003c/Text\u003e\n\u003cContainer sx={{ border: '1px solid black', width: '100vh' }}\u003e{/* Your content here */}\u003c/Container\u003e\n```\n\n## Styling\n\nEmotion 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).\n\n```jsx\nimport React from 'react';\nimport { styled, useTheme } from 'retro-react';\n\nconst StyledButton = styled('button')`\n\tbackground-color: ${(props) =\u003e props.theme.colors.primary};\n\tcolor: ${(props) =\u003e props.theme.colors.white};\n`;\n```\n\n## License\n\nThis project is licensed under the [MIT License](https://choosealicense.com/licenses/mit/).\n\n## Contributing\n\nContributions 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretro-react%2Fretro-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fretro-react%2Fretro-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fretro-react%2Fretro-react/lists"}