Introduction
React Bits is a free, open source library of animated React components and backgrounds that you copy into your project and make your own.
What is inside
Four flavours of every component
Each component comes in JavaScript or TypeScript, styled with plain CSS or Tailwind. The install name ends with the flavour: JS-CSS, JS-TW, TS-CSS or TS-TW.
npx shadcn@latest add @react-bits/SplitText-TS-TWBuilt for AI workflows
Copy for AI on every component, Copy as Markdown on every docs page, MCP through the shadcn MCP server and an llms.txt map of the whole library.
Free tools
- Background Studio
Browse every animated background, start from a preset and tune it live. Export the code, a high resolution image or a looping MP4 or WebM video, or share it as a link.
- Center Stage
Turn a screenshot or screen recording into a polished product shot. Perfect for launch videos or demos. Start from a preset, put your screens on lifelike phones, laptops and browsers, then shape the shot with 3D tilt, depth of field, shadows and type. Export 4K images, 4K video, GIFs or a link.
- Shape Magic
Design a logo mark from smart shapes, patterns, text or your own SVG, then give it a 3D material like chrome, glass or neon, or any React Bits background. Export clean SVG, PNG, favicons, video or React.
- Texture Lab
Run photos, videos or your camera through 160 one-click styles and 75+ stackable, animated effects, from ASCII and halftone to glass, chrome and glitch. Export images, videos, GIFs or a shareable style.
- Sound Lab
A library of polished sounds, from soft taps, toggles and notifications to risers, impacts and whooshes for video. Tune pitch, tone, length and space, then install a sound into your project with one command or download it as WAV, MP3 or OGG.
License
Free for personal and commercial work under the MIT + Commons Clause license. Use the components in any app, website or product, but do not sell, sublicense or redistribute the components themselves.
Installation guide