React Bits — copy-in animated React components

Overview

React Bits is a library of 215+ free animated components, grouped as Text Animations, Animations (cursor effects, hover interactions, borders), Components (cards, navigation, galleries), Micro (buttons, toggles, small details) and Backgrounds (gradients, particles, grids, shaders). It is not an npm dependency. Each component is a registry item: the CLI copies its source file into your project, installs the few packages it needs, and from then on the code is yours to edit.

Every component exists in four flavors, selected by a suffix on its name: language JS or TS, then styling CSS or TW (Tailwind). Example: SplitText-TS-TW.

An agent can: choose components, install them, add the missing packages, drop them into a page, and tune their props. The visual result (timing, colors) is best checked by the user in a browser; an agent can confirm only that it compiles. React Bits Pro is a separate paid product; this skill covers the free library.

Instructions

Prerequisites

The project needs a components.json (create it once with npx shadcn@latest init, or write it by hand) with aliases.components pointing at your components folder. Register the React Bits namespace in it: