``` ├── .eslintrc.cjs ├── .github/ ├── ISSUE_TEMPLATE/ ├── 1-bug-report.yml ├── 2-feature-request.yml ├── .gitignore ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── index.html ├── jsrepo-build-config.json ├── package-lock.json ``` ## /.eslintrc.cjs ```cjs path="/.eslintrc.cjs" module.exports = { root: true, env: { browser: true, es2020: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react/jsx-runtime', 'plugin:react-hooks/recommended', ], ignorePatterns: ['dist', '.eslintrc.cjs'], parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, settings: { react: { version: '18.2' } }, plugins: ['react-refresh'], rules: { 'react/prop-types': 'off', 'react/jsx-no-target-blank': 'off', 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], }, } ``` ## /.github/ISSUE_TEMPLATE/1-bug-report.yml ```yml path="/.github/ISSUE_TEMPLATE/1-bug-report.yml" name: 🐞 Bug report description: Help improve React Bits. labels: ["bug"] title: "[BUG]: " body: - type: markdown attributes: value: | ## Thanks for trying to improve React Bits! Before continuing make sure you have checked other issues to see if your issue has already been reported / addressed. - type: textarea id: desc attributes: label: Describe the issue description: What is happening right now? What is supposed to happen? placeholder: When I do ..., it does ... but it should do ... validations: required: true - type: markdown attributes: value: | ## Reproduction Please provide code snippets/screenshots and, if possible/needed, a codesandbox environment where your bug can be reproduced. - type: input id: reproduction-link attributes: label: Reproduction Link description: Link a codesandbox environment you used to reproduce. placeholder: https://github.com/DavidHDev/react-bits validations: required: false - type: textarea id: repro-steps attributes: label: Steps to reproduce description: What steps should be taken to reproduce your issue. validations: required: true - type: checkboxes id: terms attributes: label: Validations description: Please make sure you have checked all of the following. options: - label: I have checked other issues to see if my issue was already reported or addressed required: true ``` ## /.github/ISSUE_TEMPLATE/2-feature-request.yml ```yml path="/.github/ISSUE_TEMPLATE/2-feature-request.yml" name: 💡 Feature Request description: Suggest something for React Bits. labels: ["enhancement"] title: "[FEAT]: " body: - type: markdown attributes: value: | ## Thanks for trying to improve React Bits! Before continuing make sure you have checked other issues to see if your idea has already been discussed / addressed. - type: textarea id: desc attributes: label: Share your suggestion description: What would you like to see in React Bits? placeholder: I want flying pigs in a component please validations: required: true - type: checkboxes id: terms attributes: label: Validations description: Please make sure you have checked all of the following. options: - label: I have checked other issues to see if my issue was already discussed or addressed required: true ``` ## /.gitignore ```gitignore path="/.gitignore" # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* lerna-debug.log* node_modules dist dist-ssr *.local public/default public/tailwind public/ts/default public/ts/tailwind # Editor directories and files .vscode/* !.vscode/extensions.json .idea .DS_Store *.suo *.ntvs* *.njsproj *.sln *.sw? ``` ## /CONTRIBUTING.md # Contributing to React Bits Thank you for considering contributing to React Bits! I appreciate your interest in making this project better. To ensure a smooth collaboration, please read the following guidelines before getting started. ## Issue Tracker We use the GitHub issue tracker to keep track of bugs, feature requests, and other project-related discussions. Before starting to work on a new feature or bug fix, please check the issue tracker to see if there's an existing issue or discussion related to it. If not, feel free to create a new issue. ## Branch Naming When creating branches for your contributions, please follow the following naming convention: `feat/` For example, if you are working on a feature related to adding a new component, your branch name could be `feat/add-new-component`. This naming convention helps us to easily track and associate contributions with their respective features. ## Pull Requests We welcome pull requests from everyone as long as they respeect the quality standards of this project. To submit a pull request, please follow these steps: 1. Fork the repository and create a new branch based on the branch naming convention mentioned above. 2. Make your changes in the new branch. 3. Submit a pull request to the main repository's `main` branch. 4. Provide a clear and descriptive title for your pull request, along with a detailed description of the changes you have made, and screenshots/videos where possible. 5. For components updates, ensure that changes are reflected in all related files, such as: - `react-bits/src/demo/Backgrounds/Demo.jsx` - Preview and Code pages in the documentation, so users can copy the final component code. 6. Before you open a pull request, please make sure that your changes are tested locally, and everything looks good on desktop and mobile, also check the console for errors, and so on, so that we can keep this library at the highest quality possible. 7. Any pull requests that fail to meet these requirements will be denied, so please make sure you respect them so that your work can go through. ## Conclusion I appreciate your interest in contributing! By following these guidelines, you can help us maintain a healthy and productive open-source community. I value your contributions and look forward to your pull requests! If you have any questions or need further assistance, please don't hesitate to reach out to us through the issue tracker or other communication channels mentioned in the project's documentation. Happy contributing! ## /LICENSE.md MIT License Copyright (c) 2025 David Haz Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, and distribute the Software **as part of an application, website, or product**, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. ## Commons Clause Restriction The Software is provided under the terms of the MIT License with the following restrictions: 1. **No Redistribution** – You may **not** sell, sublicense, or otherwise redistribute the components of this library as part of a **component library, template, UI kit, or other packaged product**. 2. **No Competing Products** – You may **not** use the Software to create a library, framework, or package that directly competes with React Bits or uses its components without explicit permission to do so. 3. **No Libraries For Alternate Technologies** – You may **not** use the Software to develop any library, framework, or package that replicates components found in React Bits without explicit permission. 4. **Allowed Commercial Use** – You are **permitted** to use the Software in **commercial projects, SaaS applications, websites, or internal business tools**. ## No Warranty THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ## /README.md


react-bits logo

The largest & most creative library of animated React components.

GitHub Repo stars License
## Documentation Go to [reactbits.dev](https://reactbits.dev/) to view the documentation. ## About React Bits is a large collection of animated React components made to spice up your web creations. We've got animations, components, backgrounds, and awesome stuff that you won't be able to find anywhere else - all free for you to use! These components are all enhanced with customization options as props, to make it easy for you to get exactly what you need. ## Key Features - 60 total components (text animations, animations, components, backgrounds), growing every day - All components are lightweight, with minimal dependencies, and highly customizable - Designed to integrate seamlessly with any modern React project - Each component comes in 4 variants, to keep everyone happy: - JS + CSS - JS + Tailwind CSS - TS + CSS - TS + Tailwind CSS ## CLI (jsrepo) React Bits uses [jsrepo](https://jsrepo.dev) for installing components via CLI.
The setup steps can be found on each component's page in the [documentation](https://reactbits.dev/). ## How To Contribute? Contributions are welcome! Check the [Open Issues](https://github.com/DavidHDev/react-bits/issues) to see how you can help or submit ideas using the [Feature Request template](https://github.com/DavidHDev/react-bits/issues/new?template=2-feature-request.yml).
Please review the [Contribution Guide](https://github.com/DavidHDev/react-bits/blob/main/CONTRIBUTING.md) and follow our standards. Thanks for your time! ## Contributors ## Maintainers [David Haz](https://github.com/DavidHDev) ## Stats ![Alt](https://repobeats.axiom.co/api/embed/b1bf4dc0226458617adbdbf5586f2df953eb0922.svg "Repobeats analytics image") ## License Licensed under the [MIT license](https://github.com/davidhdev/react-bits/blob/main/LICENSE.md). ## /index.html ```html path="/index.html" React Bits - Animated UI Components For React
``` ## /jsrepo-build-config.json ```json path="/jsrepo-build-config.json" { "$schema": "https://unpkg.com/jsrepo@1.30.1/schemas/registry-config.json", "meta": { "authors": ["David Haz"], "description": "An open source collection of animated, interactive & fully customizable React components for building stunning, memorable user interfaces.", "bugs": "https://github.com/DavidHDev/react-bits/issues", "homepage": "https://reactbits.dev", "repository": "https://github.com/DavidHDev/react-bits", "tags": [ "react", "javascript", "components", "web", "reactjs", "css-animations", "component-library", "ui-components", "3d", "ui-library", "tailwind", "tailwindcss", "components", "components-library" ] }, "dirs": [], "doNotListBlocks": [], "doNotListCategories": [], "listBlocks": [], "listCategories": [], "excludeDeps": ["react"], "includeBlocks": [], "includeCategories": [], "excludeBlocks": [], "excludeCategories": [], "preview": true } ``` The content has been capped at 50000 tokens, and files over NaN bytes have been omitted. The user could consider applying other filters to refine the result. The better and more specific the context, the better the LLM can follow instructions. If the context seems verbose, the user can refine the filter using uithub. Thank you for using https://uithub.com - Perfect LLM context for any GitHub repo.