215+ free animated components and backgrounds for React.
Tune them yourself, or hand them to your agent.
Documentation · Installation · MCP · Tools · Pro
Every component has a live demo with controls, and comes in four flavors: JavaScript or TypeScript, styled with CSS or Tailwind.
| Category | Count | What you'll find |
|---|---|---|
| Text Animations | 33 | Split text, typewriters, rotating words and scroll reveals |
| Animations | 38 | Cursor effects, hover interactions, borders and image effects |
| Components | 48 | Cards, navigation, carousels and galleries |
| Micro | 34 | Buttons, toggles, indicators and other small interface details |
| Backgrounds | 63 | Gradients, particles, grids and shader effects for whole sections |
The complete React toolkit for crafting memorable UI. React Bits stays free forever. Pro takes you from individual effects to complete pages, product UI, templates and an Agent Kit, all delivered as source you own.
"Everything about this is next level." — @shadcn
"Paid once, and he keeps shipping updates. Easiest value I've gotten from any tool." — @juandadotdev
Pay once, keep every update. Every file is yours to edit, and lifetime access includes every future update. Want to see how it fits your workflow first? Grab a free template and agent skill, no checkout needed.
Add any component with the shadcn CLI. The suffix picks the flavor: JS or TS, then CSS or TW.
npx shadcn@latest add @react-bits/SplitText-TS-TWOr with jsrepo:
npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TWPrefer to copy by hand? Open a component's Code tab, pick your flavor and paste the files into your project. The installation guide covers both.
React Bits works with the shadcn MCP server, so Claude Code, Cursor, Codex, VS Code and Antigravity can find and add components for you. Add the registry to your