[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1314":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":43,"readmeContent":44,"aiSummary":45,"trendingCount":16,"starSnapshotCount":16,"syncStatus":46,"lastSyncTime":47,"discoverSource":48},1314,"react-bits","DavidHDev\u002Freact-bits","DavidHDev","An open source collection of animated, interactive & fully customizable React components for building memorable websites.","https:\u002F\u002Freactbits.dev",null,"JavaScript",40788,1866,121,1,0,55,350,1717,281,44.81,"Other",false,"main",true,[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"3d","animations","component-library","components","components-library","components-react","css-animations","javascript","react","react-components","reactjs","tailwind","tailwindcss","ui-components","ui-library","web","2026-06-12 02:00:26","\u003Cdiv align=\"center\">\n\t\u003Cbr>\n\t\u003Cbr>\n    \u003Cpicture>\n      \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"src\u002Fassets\u002Flogos\u002Freactbits-gh-black.svg\">\n      \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"src\u002Fassets\u002Flogos\u002Freactbits-gh-white.svg\">\n      \u003Cimg src=\"src\u002Fassets\u002Flogos\u002Freactbits-gh-black.svg\" alt=\"react-bits logo\" width=\"600\">\n    \u003C\u002Fpicture>\n\t\u003Cbr>\n\t\u003Cbr>\n  \u003Cstrong>The largest & most creative library of animated React components.\u003C\u002Fstrong>\n  \u003Cbr \u002F>\n  \u003Csub>Stand out with 110+ free, customizable animations for text, backgrounds, and UI.\u003C\u002Fsub>\n\t\u003Cbr>\n\t\u003Cbr>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fstargazers\">\u003Cimg alt=\"GitHub Repo stars\" src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fdavidhdev\u002Freact-bits\">\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fblob\u002Fmain\u002FLICENSE.md\">\u003Cimg alt=\"License\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT+Commons_Clause-magenta\">\u003C\u002Fa>\n  \u003Cbr>\n  \u003Cbr>\n  \u003Ca href=\"https:\u002F\u002Freactbits.dev\u002F\">📖 Documentation\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Freactbits.dev\u002Fget-started\u002Finstallation\">⚡ Quick Start\u003C\u002Fa> · \u003Ca href=\"https:\u002F\u002Freactbits.dev\u002Ftools\">🛠️ Tools\u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003Cbr \u002F>\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"src\u002Fassets\u002Fcommon\u002Freadme-showcase.png\" alt=\"React Bits component showcase\" width=\"1000\">\n\u003C\u002Fdiv>\n\n\u003Cbr \u002F>\n\n## ✨ Why React Bits?\n\nReact Bits helps you **ship stunning interfaces faster**. Instead of spending hours crafting animations from scratch, grab a polished component and customize it to fit your vision.\n\n> 💬 **Text Animations** · 🌀 **Animations** · 🧩 **Components** · 🖼️ **Backgrounds**\n\n## 🚀 Features\n\n- **110+ components** — text animations, UI elements, and backgrounds, growing weekly\n- **Minimal dependencies** — lightweight and tree-shakeable\n- **Fully customizable** — tweak everything via props or edit the source directly\n- **4 variants per component** — JS-CSS, JS-TW, TS-CSS, TS-TW (everyone's happy)\n- **Copy-paste ready** — works with any modern React project\n\n## 🛠️ Creative Tools\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"src\u002Fassets\u002Fcommon\u002Ftools-readme.webp\" alt=\"React Bits Tools\" width=\"1000\" style=\"border-radius: 30px; max-width: 1920px;\">\n\u003C\u002Fdiv>\n\n\u003Chr \u002F>\n\n### Beyond components, React Bits offers **free creative tools** to supercharge your workflow:\n\n| Tool                                                 | What it does                                                                             |\n| ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |\n| **[Background Studio](https:\u002F\u002Freactbits.dev\u002Ftools)** | Explore animated backgrounds, customize effects, export as video\u002Fimage\u002Fcode              |\n| **[Shape Magic](https:\u002F\u002Freactbits.dev\u002Ftools)**       | Create inner rounded corners between shapes, export as SVG, React code or clip-path code |\n| **[Texture Lab](https:\u002F\u002Freactbits.dev\u002Ftools)**       | Apply 20+ effects (noise, dithering, ASCII) to images\u002Fvideos and export in high quality  |\n\n## 📦 Installation\n\nReact Bits supports [shadcn](https:\u002F\u002Fui.shadcn.com\u002F) and [jsrepo](https:\u002F\u002Fjsrepo.dev) for quick CLI installs.\n\n```bash\n# Example: Add a component via shadcn\nnpx shadcn@latest add @react-bits\u002FBlurText-TS-TW\n```\n\nEach component page includes copy-ready CLI commands. See the [installation guide](https:\u002F\u002Freactbits.dev\u002Fget-started\u002Finstallation) for full details.\n\nYou can also select your preferred technologies, and copy the code manually.\n\n## 🚀 Sponsors\n\nReact Bits is proudly supported by these amazing sponsors:\n\n### Diamond\n\n\u003Ca href=\"https:\u002F\u002Fwww.shadcnblocks.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnblocks.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnblocks-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fshadcnblocks.svg\" alt=\"shadcnblocks.com\" style=\"height: 50px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n   \n\u003Ca href=\"https:\u002F\u002Fshadcnstudio.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnstudio.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcnstudio-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fshadcnstudio.svg\" alt=\"shadcn studio\" style=\"height: 50px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n### Platinum\n\n\u003Ca href=\"https:\u002F\u002Fpro.tailark.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=platinum&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Ftailark.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Ftailark-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Ftailark.svg\" alt=\"Tailark\" style=\"height: 50px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n### Silver\n\n\u003Ca href=\"https:\u002F\u002Fnextjsweekly.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fnextjsweekly.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fnextjsweekly-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fnextjsweekly.svg\" alt=\"Next.js Weekly\" style=\"height: 40px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n   \n\u003Ca href=\"https:\u002F\u002Fshadcncraft.com\u002F?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits\" target=\"_blank\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcncraft.svg\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"public\u002Fassets\u002Fsponsors\u002Fshadcncraft-lightmode.svg\">\n    \u003Cimg src=\"public\u002Fassets\u002Fsponsors\u002Fshadcncraft.svg\" alt=\"Shadcncraft\" style=\"height: 40px;\">\n  \u003C\u002Fpicture>\n\u003C\u002Fa>\n\n\u003Chr \u002F>\n\n**[Become a sponsor](https:\u002F\u002Freactbits.dev\u002Fsponsors)** — Get your brand in front of 500K+ developers monthly.\n\n## 🤝 Contributing\n\nWe'd love your help! Check the [open issues](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fissues) or submit ideas via the [feature request template](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fissues\u002Fnew?template=2-feature-request.yml).\n\nPlease read the [contribution guide](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fblob\u002Fmain\u002FCONTRIBUTING.md) first — thanks for making React Bits better!\n\n## 🙌 Contributors\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=davidhdev\u002Freact-bits\" \u002F>\n\u003C\u002Fa>\n\n## 👤 Maintainer\n\n**[David Haz](https:\u002F\u002Fgithub.com\u002FDavidHDev)** — creator & lead maintainer\n\n## 🌐 Official Ports\n\n| Framework | Link                                      |\n| --------- | ----------------------------------------- |\n| Vue.js    | [vue-bits.dev](https:\u002F\u002Fvue-bits.dev\u002F)     |\n| Svelte    | [sveltebits.xyz](https:\u002F\u002Fsveltebits.xyz\u002F) |\n\n## 📊 Stats\n\n![Repobeats analytics](https:\u002F\u002Frepobeats.axiom.co\u002Fapi\u002Fembed\u002Fb1bf4dc0226458617adbdbf5586f2df953eb0922.svg 'Repobeats analytics image')\n\n## 🗳️ Credit\n\nReact Bits occasionally draws inspiration from publicly available code examples. These are rewritten as full-fledged, customizable components for JS, TS, CSS, and Tailwind. If you recognize your work, [open an issue](https:\u002F\u002Fgithub.com\u002FDavidHDev\u002Freact-bits\u002Fissues) to request credit.\n\n## 📄 License\n\n[MIT + Commons Clause](https:\u002F\u002Fgithub.com\u002Fdavidhdev\u002Freact-bits\u002Fblob\u002Fmain\u002FLICENSE.md) — free for personal and commercial use.\n","React Bits 是一个开源的 React 组件库，提供大量动画、互动且完全可定制的组件，用于构建令人难忘的网站。该项目包含超过110个轻量级、树摇优化的组件，覆盖文本动画、UI元素和背景等，并支持四种变体（JS-CSS, JS-TW, TS-CSS, TS-TW），以适应不同开发者的需求。每个组件都高度可定制，既可以通过props调整也可以直接修改源代码。此外，React Bits 还提供了几款免费创意工具如Background Studio、Shape Magic 和 Texture Lab 来进一步提升开发效率。这些工具可以帮助用户轻松创建复杂的动画背景、形状效果及图像处理任务。此项目非常适合需要快速实现高质量视觉效果的Web应用开发场景。",2,"2026-06-11 02:43:01","top_all"]