Home
Featured
110+ Animated Components for Modern Apps – React Bits

110+ Animated Components for Modern Apps – React Bits

DavidHDev Added 2 months ago
Live Demo Download Source Code

Description:

React Bits is a collection of animated React components that provide over 110 unique animations and interactive UI components.

Features

  • 🎨 110+ Components across text animations, effects, UI components, and backgrounds with weekly additions.
  • ⚙️ Minimal Dependencies with highly customizable props for easy integration into existing projects.
  • 🔧 Full Source Code Access allowing you to modify and enhance components according to project needs.
  • 🚀 Multiple Technology Variants supporting JavaScript/TypeScript with plain CSS or Tailwind CSS options.
  • 📱 Modern React Integration designed to work with contemporary React applications and workflows.
  • 🎯 Prop-First Customization enabling quick adjustments through exposed component properties without code modification.
  • 📦 Modular Installation supporting both manual copy-paste and CLI-based component installation methods.

How to Use It

You can integrate React Bits components into your project either by manually copying the code or by using a command-line interface (CLI).

Manual Installation

1. Browse the components on the React Bits website and choose one that you like. Navigate to its “Code” tab to view the source.

2. Some components may have external library dependencies. You can find the necessary installation command under the “Manual” section.

3. The “Code” tab provides the complete source code for the component. You can switch between JavaScript/TypeScript and CSS/Tailwind to get the code that matches your project’s stack.

3. Each component’s documentation includes a basic usage example. You can also refer to the “Preview” tab for a full list of available props for customization.

CLI Installation

React Bits supports CLI installations through shadcn and jsrepo.

For shadcn:

Use the following command structure, replacing the placeholders with your desired language and style.

npx shadcn@latest add https://reactbits.dev/r/SplitText-<LANGUAGE>-<STYLE>

The available <LANGUAGE>-<STYLE> combinations are:

  • JS-CSS
  • JS-TW
  • TS-CSS
  • TS-TW

For jsrepo:

Use this command structure, replacing <VARIANT> with your choice.

npx jsrepo add https://reactbits.dev/<VARIANT>/TextAnimations/SplitText

The available <VARIANT> options are:

  • default (JavaScript + Plain CSS)
  • tailwind (JavaScript + Tailwind)
  • ts/default (TypeScript + Plain CSS)
  • ts/tailwind (TypeScript + Tailwind)

You can use pnpm dlx or yarn in place of npx.

Related Resources

  • Framer Motion provides a production-ready motion library for React with declarative animations and gesture support.
  • React Spring offers a spring physics-based animation library for React applications with hooks-based API.
  • Lottie React enables integration of After

FAQs

Q: Can I use React Bits components in commercial projects?
A: Yes, React Bits uses the MIT + Commons Clause license which allows commercial usage. You own the code after installation and can modify it according to your project requirements.

Q: Do React Bits components work with Next.js and other React frameworks?
A: React Bits components integrate with any modern React application including Next.js, Gatsby, Create React App, and Vite-based projects. The components use standard React patterns without framework-specific dependencies.

Q: Do I need to install the entire library?
A: No, React Bits is modular. You can install only the specific components you need, either by copying the code or using the CLI.

Add Comment