README

Animated React components for websites people remember.
  215+ free animated components and backgrounds for React.Tune them yourself, or hand them to your agent.
  
    
    
  
  
    Documentation ·
    Installation ·
    MCP ·
    Tools ·
    Pro
  
  



  
    
    
    
  


 What's inside

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 |

 React Bits Pro

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.


  
    
      
      
      
    
  
   
  
    
      
      
      
    
  


 Installation

Add any component with the shadcn CLI. The suffix picks the flavor: JS or TS, then CSS or TW.

bash
npx shadcn@latest add @react-bits/SplitText-TS-TW


Or with jsrepo:

bash
npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW


Prefer 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.

 Use it with your agent

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 components.json:

json
{
  "registries": {
    "@react-bits": "https://reactbits.dev/r/{name}.json"
  }
}


Then connect your client, for example npx shadcn@latest mcp init --client claude, and ask for what you need. See the MCP guide for every client.

 Creative tools

Five free tools for making assets and sounds with React Bits, right in the browser.


  
    
    
    
  


- Background Studio: browse every animated background, start from a preset and tune it live. Export the code, a hi

Discussions