React Bits
Open-source animated React component library (~42K GitHub stars) with shadcn/jsrepo install routes, four stack variants per component, agent-readable docs, MCP setup, and a paid Pro tier for blocks and templates.
React Bits (DavidHDev/react-bits) is David Haz's collection of animated, interactive, customizable React components for memorable interfaces. The library has 130+ free components across UI components, animations, backgrounds, and text animations, plus creative tools for background, shape, and texture generation. Source: reactbits.dev, 2026-06-29; GitHub README, 2026-06-29
Install and registry
- Site: https://reactbits.dev/
- Agent docs: https://reactbits.dev/llms.txt
- GitHub: https://github.com/DavidHDev/react-bits (42,188 stars, 1,935 forks on 2026-06-29) Source: GitHub API, 2026-06-29
- Versioning: no Git tags or package release channel; current
mainsnapshot checked atf29204770d77ccc226121cc9eb2ca5775aa9d71dfrom 2026-06-24. Source: GitHub API, 2026-06-29 - License: MIT + Commons Clause; use in apps/sites/products is allowed, but do not resell, sublicense, redistribute, or port the components as a competing component bundle. Source: LICENSE.md, 2026-06-29
- Each component ships in JS/CSS, JS/Tailwind, TS/CSS, and TS/Tailwind variants. Components can be copied manually or installed through shadcn/jsrepo URLs. Source: reactbits.dev/llms.txt, 2026-06-29
- Listed in Shadcn Registry Directory (Top Blocks) as registry #2; OrcDev ranked it in a top shadcn-registry roundup (217 bookmarks on the list post). Source: X/@orcdev, 2026-05-07
CLI shape:
npx shadcn@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>
npx jsrepo@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>
<LANG> is JS or TS; <STYLE> is CSS or TW. Component page paths are kebab-case, while CLI identifiers are PascalCase. Example: SplitText lives at /text-animations/split-text. Source: reactbits.dev/llms.txt, 2026-06-29
Dependencies vary by component: some use gsap, motion, three, ogl, or other animation/rendering packages. Check the selected component before adding dependencies. Source: reactbits.dev/llms.txt, 2026-06-29
Pro tier
pro.reactbits.dev sells lifetime tiers: Starter ($99, 100+ components), Pro ($199, +158 blocks), Ultimate ($299, +7+ full templates). Commercial license, monthly drops, AI agent skill file included. Source: pro.reactbits.dev, 2026-06-01
Relevance
Complements Frontend and Design Skills and Component Library Sources. Use React Bits when a UI needs expressive text motion, cursor interaction, animated docks/cards, particle or shader-style backgrounds, or a one-off motion-heavy marketing moment. Prefer Motion Primitives for quieter app microinteractions and Shaders.com for deeper shader search/install flows.
Kevin's design folder explicitly saved Liquid Chrome, a liquid-metal/chrome-style background effect. Route it through Design Effects and Motion Sources and Shader Effects Libraries for art direction, then through Component Library Sources before copying code into a project. Source: raw/notes/design-folder-sites-2026-06-25.md
Use rules:
- Treat React Bits as a copy/adapt source, not a global design system.
- Retokenize color, typography, radius, motion speed, hover behavior, and reduced-motion fallback.
- Avoid stacking multiple always-on React Bits effects in one viewport.
- Verify WebGL/canvas effects in the browser on desktop and mobile before shipping.
- Run accessibility review for interactive components, especially cursor, dock, nav, carousel, and gallery patterns.
Timeline
- 2026-06-29 | Refreshed React Bits from the official site,
llms.txt, GitHub API, and license. Promoted it as a first-class component-library source with shadcn/jsrepo install routes, MCP/agent-doc awareness, no-tag versioning note, and Commons Clause caveat. Source: User request, 2026-06-29; https://reactbits.dev/; https://reactbits.dev/llms.txt; GitHubDavidHDev/react-bits - 2026-06-25 | Added Liquid Chrome as the saved React Bits background from Kevin's design-folder source set and linked it into the effects/component routers. Source: raw/notes/design-folder-sites-2026-06-25.md
- 2026-06-01 | Wiki page created from enriched X bookmark
2052306952554709296(OrcDev shadcn registry list; reactbits.dev + GitHub resolved). Source: compiled from enrichment, 2026-06-01