MCPcopy
hub / github.com/DavidHDev/react-bits

github.com/DavidHDev/react-bits @main sqlite

repository ↗ · DeepWiki ↗
6,152 symbols 12,646 edges 941 files 2 documented · 0%
README
  <img src="https://github.com/DavidHDev/react-bits/raw/main/src/assets/logos/reactbits-gh-black.svg" alt="react-bits logo" width="600">

The largest & most creative library of animated React components.

Stand out with 130+ free, customizable animations for text, backgrounds, and UI.

GitHub Repo stars License

📖 Documentation · ⚡ Quick Start · 🛠️ Tools

React Bits component showcase

✨ Why React Bits?

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

💬 Text Animations · 🌀 Animations · 🧩 Components · 🖼️ Backgrounds

🚀 Features

  • 130+ components — text animations, UI elements, and backgrounds, growing weekly
  • Minimal dependencies — lightweight and tree-shakeable
  • Fully customizable — tweak everything via props or edit the source directly
  • 4 variants per component — JS-CSS, JS-TW, TS-CSS, TS-TW (everyone's happy)
  • Copy-paste ready — works with any modern React project

🛠️ Creative Tools

React Bits Tools


Beyond components, React Bits offers free creative tools to supercharge your workflow:

Tool What it does
Background Studio Explore animated backgrounds, customize effects, export as video/image/code
Shape Magic Create inner rounded corners between shapes, export as SVG, React code or clip-path code
Texture Lab Apply 20+ effects (noise, dithering, ASCII) to images/videos and export in high quality

📦 Installation

React Bits supports shadcn and jsrepo for quick CLI installs.

# Example: Add a component via shadcn
npx shadcn@latest add @react-bits/BlurText-TS-TW

Each component page includes copy-ready CLI commands. See the installation guide for full details.

You can also select your preferred technologies, and copy the code manually.

🚀 Sponsors

React Bits is proudly supported by these amazing sponsors:

Diamond

<img src="https://github.com/DavidHDev/react-bits/raw/main/public/assets/sponsors/shadcnblocks.svg" alt="shadcnblocks.com" style="height: 50px;">

   

<img src="https://github.com/DavidHDev/react-bits/raw/main/public/assets/sponsors/shadcnstudio.svg" alt="shadcn studio" style="height: 50px;">

Platinum

<img src="https://github.com/DavidHDev/react-bits/raw/main/public/assets/sponsors/tailark.svg" alt="Tailark" style="height: 50px;">

Silver

<img src="https://github.com/DavidHDev/react-bits/raw/main/public/assets/sponsors/nextjsweekly.svg" alt="Next.js Weekly" style="height: 40px;">

   

<img src="https://github.com/DavidHDev/react-bits/raw/main/public/assets/sponsors/shadcncraft.svg" alt="Shadcncraft" style="height: 40px;">


Become a sponsor — Get your brand in front of 500K+ developers monthly.

🤝 Contributing

We'd love your help! Check the open issues or submit ideas via the feature request template.

Please read the contribution guide first — thanks for making React Bits better!

🙌 Contributors

👤 Maintainer

David Haz — creator & lead maintainer

🌐 Official Ports

Framework Link
Vue.js vue-bits.dev
Svelte sveltebits.xyz

📊 Stats

Repobeats analytics

🗳️ Credit

React 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 to request credit.

📄 License

MIT + Commons Clause — free for personal and commercial use.

Extension points exported contracts — how you extend this code

LiquidEtherWebGL (Interface)
(no doc) [1 implementers]
src/ts-tailwind/Backgrounds/LiquidEther/LiquidEther.tsx
LiquidEtherWebGL (Interface)
(no doc) [1 implementers]
src/ts-default/Backgrounds/LiquidEther/LiquidEther.tsx
IntrinsicElements (Interface)
(no doc)
src/global.d.ts
TrueFocusProps (Interface)
(no doc)
src/ts-tailwind/TextAnimations/TrueFocus/TrueFocus.tsx
TrueFocusProps (Interface)
(no doc)
src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx
FocusRect (Interface)
(no doc)
src/ts-tailwind/TextAnimations/TrueFocus/TrueFocus.tsx
FocusRect (Interface)
(no doc)
src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx
ScrollRevealProps (Interface)
(no doc)
src/ts-tailwind/TextAnimations/ScrollReveal/ScrollReveal.tsx

Core symbols most depended-on inside this repo

useComponentProps
called by 134
src/hooks/useComponentProps.js
rand
called by 71
src/tools/texture-lab/Controls.jsx
useForceRerender
called by 70
src/hooks/useForceRerender.js
setSize
called by 61
src/ts-tailwind/Backgrounds/Hyperspeed/Hyperspeed.tsx
setSize
called by 61
src/tailwind/Backgrounds/Hyperspeed/Hyperspeed.jsx
setSize
called by 61
src/content/Backgrounds/Hyperspeed/Hyperspeed.jsx
setSize
called by 61
src/ts-default/Backgrounds/Hyperspeed/Hyperspeed.tsx
bind
called by 47
src/ts-tailwind/Animations/SplashCursor/SplashCursor.tsx

Shape

Function 4,029
Method 1,281
Interface 430
Class 412

Languages

TypeScript100%

Modules by API surface

src/tailwind/Backgrounds/LiquidEther/LiquidEther.jsx90 symbols
src/content/Backgrounds/LiquidEther/LiquidEther.jsx90 symbols
src/ts-tailwind/Backgrounds/LiquidEther/LiquidEther.tsx89 symbols
src/ts-default/Backgrounds/LiquidEther/LiquidEther.tsx89 symbols
src/ts-tailwind/Animations/ImageTrail/ImageTrail.tsx87 symbols
src/ts-default/Animations/ImageTrail/ImageTrail.tsx87 symbols
src/tailwind/Animations/ImageTrail/ImageTrail.jsx86 symbols
src/content/Animations/ImageTrail/ImageTrail.jsx86 symbols
src/tools/texture-lab/renderer.js67 symbols
src/ts-tailwind/Backgrounds/Ballpit/Ballpit.tsx63 symbols
src/ts-default/Backgrounds/Ballpit/Ballpit.tsx63 symbols
src/ts-tailwind/Components/InfiniteMenu/InfiniteMenu.tsx60 symbols

Dependencies from manifests, versioned

@chakra-ui/icons2.2.4 · 1×
@chakra-ui/react3.20.0 · 1×
@emotion/react11.14.0 · 1×
@gsap/react2.1.2 · 1×
@jsrepo/shadcn2.0.0 · 1×
@react-three/drei10.7.4 · 1×
@react-three/fiber9.3.0 · 1×
@react-three/postprocessing3.0.4 · 1×
@react-three/rapier2.1.0 · 1×
@tailwindcss/vite4.0.3 · 1×
@types/matter-js0.19.8 · 1×
@types/react19.0.0 · 1×

For agents

$ claude mcp add react-bits \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact