React Bits: 215+ Animated React Components & Backgrounds

Description:

React Bits is a React UI component library that adds animated text, interactive navigation, galleries, micro-interactions, and backgrounds to React applications.

It currently has 215+ components that you can install individually and edit inside your project.

Features

• JavaScript and TypeScript components with plain CSS or Tailwind CSS styles.
• Adjustable component props and editable source code.
• Individual installations with shadcn or jsrepo, including component-specific dependencies.
• Scroll, hover, click, and pointer-driven animations across multiple UI categories.
• Optional shadcn MCP integration for coding agents such as Claude Code and Codex.

Use Cases

• Product landing pages with animated hero text and scroll-triggered sections.
• Portfolios with draggable photo galleries, 3D cards, and animated navigation.
• Dashboards with button feedback, toggle animations, and status indicators.
• Promotional pages with particle effects, gradients, and shader backgrounds.

Available React Bits Components

UI Components

Text Animations

• Tech Text, Text Loop, Masked Heading, Particle Text, Split Flap Text, Warp Text, Stroke Text.
• Depth Text, Fold Text, Echo Text, Split Text, Blur Text, Circular Text, Text Type.
• Shuffle, Shiny Text, Text Pressure, Curved Loop, Fuzzy Text, Gradient Text, Falling Text.
• Text Cursor, Decrypted Text, True Focus, Scroll Float, Scroll Reveal, ASCII Text, Scrambled Text.
• Rotating Text, Glitch Text, Scroll Velocity, Variable Proximity, Count Up.

Animations

• Crystalized Ball, Electric Logo, Dither Veil, Glow Cursor, Scroll Expand, Ripple Distortion, Elastic Mesh.
• Swarm Cursor, Halftone Reveal, Pixel Swap, Cursor Grid, Animated Content, Fade Content, Electric Border.
• Orbit Images, Pixel Transition, Glare Hover, Logo Loop, Target Cursor, Laser Flow, Ghost Cursor.
• Gradual Blur, Click Spark, Magnet, Strands, Sticker Peel, Pixel Trail, Cubes.
• Metallic Paint, Noise, Shape Blur, Crosshair, Image Trail, Ribbons, Splash Cursor.
• Meta Balls, Blob Cursor, Star Border.

Micro Interactions

• Shredder, Paper Crumple, Tear Ticket, Flip Card, Branched Menu, Folder Float, Refine Frame.
• Thought Line, Voice Pill, Slosh Gauge, Prompt Bar, Swipe Toast, Sling Button, Bell Toggle.
• Call Chip, Status Mark, Glide Select, Swipe Row, Jelly Radio, Comet Dial, Wake Slider.
• Code Slots, Dodge Field, Lattice Loader, Scrub Field, Fuse Button, Warm Tooltip, Slide Commit.
• Rubber Segment, Pulse Heart, Spring Check, Peek Rating, Hold Button, Squish Switch.

Backgrounds

• Gradient ASCII, Flux Lines, Pattern Waves, Micro Slats, Shape Waves, Aero Shards, Ghost Fibers.
• CRT Warp, Molten Metal, Gradient Waves, Web Threads, Topography, Light Tunnel, Sliced Waves.
• Acid Squares, Scanner, Ferrofluid, Lightfall, Liquid Ether, Prism, Dark Veil.
• Light Pillar, Antigravity, Silk, Floating Lines, Side Rays, Light Rays, Pixel Blast.
• Color Bends, Line Waves, Radar, Soft Aurora, Magic Rings, Aurora, Plasma.
• Plasma Wave, Particles, Gradient Blinds, Grainient, Grid Scan, Beams, Pixel Snow.
• Lightning, Prismatic Burst, Galaxy, Dither, Faulty Terminal, Ripple Grid, Dot Field.
• Dot Grid, Threads, Hyperspeed, Iridescence, Waves, Magnet Lines, Grid Distortion.
• Ballpit, Orb, Letter Glitch, Grid Motion, Shape Grid, Liquid Chrome, Balatro.

How to Use React Bits

Install with shadcn

Initialize shadcn in your React project:

npx shadcn@latest init

Choose a language and styling variant: JS-CSS, JS-TW, TS-CSS, or TS-TW. To install the TypeScript and Tailwind version of Split Text:

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

Install with jsrepo

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

Manual Installation

1. Open Split Text or another component and choose the JavaScript/TypeScript and CSS/Tailwind variant.
2. Copy the component source into a local .jsx or .tsx file. Copy the companion stylesheet for CSS variants.
3. Install the dependencies listed on that component’s Code tab.

Split Text imports GSAP and its React integration:

npm install gsap @gsap/react

Basic Usage: Animated Hero Heading

Save the TypeScript and Tailwind version as components/SplitText.tsx, then add this component alongside it:

// components/HeroHeading.tsx
'use client';
import SplitText from './SplitText';
export default function HeroHeading() {
  return (
    <SplitText
      tag="h2"
      text="Analytics for growing teams"
      splitType="words"
      effect="rise"
      trigger="view"
      delay={80}
      duration={0.9}
      className="text-4xl font-semibold"
    />
  );
}

Advanced Example: Scroll-Triggered Content

Add the TypeScript and Tailwind version of Fade Content:

npx shadcn@latest add @react-bits/FadeContent-TS-TW

Save the installed component as components/FadeContent.tsx and create:

// components/FeatureReveal.tsx
'use client';
import FadeContent from './FadeContent';
export default function FeatureReveal() {
  return (
    <FadeContent effect="focus" trigger="scroll" duration={0.8} once>
      <section className="rounded-xl border p-8">
        <h2 className="text-2xl font-semibold">Activity overview</h2>
        <p>Review trends across accounts and events.</p>
      </section>
    </FadeContent>
  );
}

Split Text Props and Customization

Set className for Tailwind styling. For a plain CSS installation, edit the component’s companion stylesheet. The following props control the text reveal:

Use React Bits with AI Coding Agents

Add the @react-bits registry to the existing registries object in components.json:

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

For Claude Code, initialize the shadcn MCP server:

npx shadcn@latest mcp init --client claude

For Codex, add this configuration to ~/.codex/config.toml:

[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]

Alternatives and Related Resources

• 78+ Animated React Components for Next.js – Vengeance UI
• Animated React Components for shadcn/ui
• Cojeev UI: 170+ Animated React UI Components for shadcn/ui
• Free UI Component Libraries For React & React Native

FAQs

Can React Bits be used on commercial websites?
Yes. The MIT + Commons Clause license permits commercial use inside websites and products. Selling, sublicensing, or redistributing the components themselves as individual assets, bundles, or ports is prohibited.

Can React Bits components run in the Next.js App Router?
Yes. Interactive components such as Split Text and Fade Content use browser-side animation. Render them from a client component marked with 'use client', as in the examples above.