{"id":13815819,"url":"https://github.com/rewindui/rewindui","last_synced_at":"2025-04-08T00:38:30.155Z","repository":{"id":163179451,"uuid":"605448045","full_name":"rewindui/rewindui","owner":"rewindui","description":"A React component library for building modern web applications using Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2024-07-30T09:54:01.000Z","size":3156,"stargazers_count":722,"open_issues_count":3,"forks_count":38,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-03-31T23:36:48.942Z","etag":null,"topics":["class-variance-authority","component-library","cva","nextjs","react","reactjs","storybook","tailwind","tailwind-css","tailwindcss","ui-kit"],"latest_commit_sha":null,"homepage":"https://rewind-ui.dev","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/rewindui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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-02-23T07:08:21.000Z","updated_at":"2025-03-20T03:42:04.000Z","dependencies_parsed_at":"2023-10-16T20:12:29.931Z","dependency_job_id":"86dc4e3b-a2df-4066-8b3d-06d44873e252","html_url":"https://github.com/rewindui/rewindui","commit_stats":null,"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewindui%2Frewindui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewindui%2Frewindui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewindui%2Frewindui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rewindui%2Frewindui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rewindui","download_url":"https://codeload.github.com/rewindui/rewindui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247755560,"owners_count":20990620,"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":["class-variance-authority","component-library","cva","nextjs","react","reactjs","storybook","tailwind","tailwind-css","tailwindcss","ui-kit"],"created_at":"2024-08-04T04:04:07.508Z","updated_at":"2025-04-08T00:38:28.849Z","avatar_url":"https://github.com/rewindui.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"![Rewind-UI, Effortless user interfaces](https://rewind-ui.dev/images/og-image.jpg)\n\n\u003cdiv align=\"center\"\u003e\n\n[![license](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](https://github.com/rewindui/rewindui/blob/main/LICENSE)\n[![npm latest package](https://img.shields.io/npm/v/@rewind-ui/core/latest.svg?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/@rewind-ui/core)\n[![npm downloads](https://img.shields.io/npm/dt/@rewind-ui/core.svg?style=for-the-badge\u0026logo=npm)](https://www.npmjs.com/package/@rewind-ui/core)\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@rewind-ui/core.svg?style=for-the-badge\u0026label=minified)](https://bundlephobia.com/package/@rewind-ui/core)\n\n\u003c/div\u003e\n\n# Introduction\nBuilt specifically for use with [React](https://react.dev) and [Tailwind CSS](https://tailwindcss.com/), Rewind-UI offers a range of accessible, highly customizable components that can be easily integrated into any react project. Rewind-UI comes with a set of default styles that can be [easily customized](https://rewind-ui.dev/theming) using Tailwind CSS classes. Furthermore, each component can be parameterized using a set of props that can be used to change the default styles of the component.\n\n# Installation\nRewind-UI is available as an NPM package and can be installed using the following command:\n\n```bash\nnpm install @rewind-ui/core\n```\n\n# Configuration\nRewind-UI is designed to be used with React and Tailwind CSS. To use Rewind-UI, you must first install ReactJS and [Tailwind CSS](https://tailwindcss.com/docs/installation) in your project. Furthermore, you must also install the following NPM packages:\n\n```bash\nnpm install tailwind-scrollbar @tailwindcss/forms @tailwindcss/typography\n```\n\nAfter having installed Tailwind CSS, you must configure it to work with Rewind-UI. To do this, you must first create a `tailwind.config.js` file in the root directory of your project. Then, add the following code to that config file:\n\n\u003e It is highly recommended to add only the needed style files to avoid having a bloated css file\n\n```js\nmodule.exports = {\n  content: [\n    './src/**/*.{html,jsx,tsx}',\n    // you can either add all styles\n    './node_modules/@rewind-ui/core/dist/theme/styles/*.js',\n    // OR you can add only the styles you need\n    './node_modules/@rewind-ui/core/dist/theme/styles/Button.styles.js',\n    './node_modules/@rewind-ui/core/dist/theme/styles/Text.styles.js'\n  ],\n  plugins: [\n    require('@tailwindcss/typography'),\n    require('tailwind-scrollbar')({ nocompatible: true }),\n    require('@tailwindcss/forms')({\n      strategy: 'class' // only generate classes\n    })\n  ]\n};\n```\n\n# Usage\nTo start using Rewind-UI components just add the following import statement to the top of your React component:\n\n```tsx\nimport { Button } from '@rewind-ui/core';\n```\n\nThen, you can use the component in your JSX code:\n\n```tsx\n\u003cButton\u003eClick Me\u003c/Button\u003e\n```\n\n# Properties\nEach component has a set of default styles that can be parameterized using the corresponding props. For example, the `Button` component has a default blue color and a medium size. These values can be changed by setting the `color` and `size` props to the component:\n\n```tsx\n\u003cButton color=\"black\" size=\"sm\"\u003eClick Me\u003c/Button\u003e\n```\n\nMoreover, the style of a component can be customized by passing the normal `className` prop to it. This prop can be used to override the default styles of the component. For example, the following code will change the font weight of the button to semi-bold:\n\nRewind-UI is using [tailwind-merge](https://github.com/dcastil/tailwind-merge) to merge the default classes with the classes you provide in the `className` prop and resolve any possible conflicts.\n\n```tsx\n  \u003cButton color=\"black\" size=\"sm\" className=\"font-semibold\"\u003eClick Me\u003c/Button\u003e\n```\n\n# Variants\nTrying to avoid to make the user use multiple properties again and again we have created a `variant` prop. A variant is basically a pre-defined set of properties that can be used to customize a component. For example, the `Button` component has a `success` variant that can be used to create a bootstrap-like success button:\n\n```tsx\n  \u003cButton variant=\"success\"\u003eClick Me\u003c/Button\u003e\n```\n\nYou can read more about the variants of each component in their corresponding documentation page.\n\n# Customization\nAll Rewind-UI components are highly customizable. This means that you can easily change the default styles of a component by overriding the corresponding Tailwind CSS classes. You can read more about style customization on the [theming](https://rewind-ui.dev/theming) page.\n\n# Credits\nSpecial thanks to the following people:\n* [Joe Bell](https://twitter.com/joebell_) - For his amazing open source library [Class Variance Authority](https://cva.style/docs) which is the foundation of rewind's theming system.\n* [Jack Herrington](https://twitter.com/jherr) - For inspiring me to start building Rewind-UI.\n* [shadcn](https://twitter.com/shadcn) - For his open source projects ([taxonomy](https://tx.shadcn.com/) \u0026 [ui](https://ui.shadcn.com/)) that helped me build this documentation.\n\nSpecial thanks to the following teams:\n* [React](https://react.dev/) - For creating React.\n* [Tailwind Labs](https://tailwindcss.com) - For creating Tailwind CSS.\n* [Vercel](https://vercel.com/) - For creating Next.js and their awesome open source templates.\n* [Floating-UI](https://floating-ui.com/) - For creating Floating-UI.\n* [Phosphor](https://phosphoricons.com/) - For creating Phosphor icon family.\n\n[![Powered by Vercel](https://rewind-ui.dev/images/powered-by-vercel.svg)](https://vercel.com?utm_source=[RewindUI]\u0026utm_campaign=oss.)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frewindui%2Frewindui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frewindui%2Frewindui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frewindui%2Frewindui/lists"}