react-bits

Original：🇺🇸 English

Translated

2 scripts

Use when adding an animated UI component, text effect, cursor/hover effect, or WebGL/canvas background to a React project via React Bits (reactbits.dev) — or when asked to recall/write a React Bits component's code, props, or install steps from memory instead of fetching it.

13installs

Sourcephilotheephilix/reactbits.dev-skill

Added on2026-09-12

NPX Install

npx skill4agent add philotheephilix/reactbits.dev-skill react-bits

SKILL.md Content

View Translation Comparison →

React Bits

Fetches real, current component source from the React Bits public registry instead of recalling it from training data. React Bits (reactbits.dev, MIT + Commons Clause, by David Haz) publishes 165 animated components — Text Animations, Animations, Components, Backgrounds — each in 4 variants (JS/TS × CSS/Tailwind).

The hard rule

Never write React Bits component code from memory. Always fetch it live.

Verified failure mode (baseline test, no skill): asked for Aurora + BlurText, an agent hallucinated plausible-looking code, guessed

framer-motion

as a dependency (the live package is

motion

), invented prop defaults, and only disclosed the guessing when explicitly asked. The code looked complete and shippable. It wasn't current.

Training data goes stale; this library updates variants in sync. If you can't reach the registry, say so — don't fall back to recalled code.

Fetch

bash

node scripts/rb-add.mjs <Component> [<Component>...] --variant <JS|TS>-<CSS|TW> --dest <path> [--install]
node scripts/rb-add.mjs --list                      # print all 165 names

Writes real source files to

--dest

(default

src/components

) and prints the exact

npm install

line for that component's dependencies (default variant:

TS-TW

).

--install

runs it for you.

No script access? Fetch directly — same registry, same rules:

bash

curl -s https://reactbits.dev/r/<Name>-<JS|TS>-<CSS|TW>.json   # one component, files[].content = source
curl -s https://reactbits.dev/r/registry.json                  # index, 660 entries, no source, no category field

reactbits.dev is an SPA — an unknown path still returns HTTP 200 with an HTML shell. A 200 status proves nothing; parse the body as JSON and check it before trusting it.

Workflow

Confirm the variant — JS or TS, CSS or Tailwind. Default to matching the project's existing files; ask if genuinely ambiguous.
Find the component — grep references/catalog.md (offline, 165 entries with category + description + deps) or
```
--list
```
.
Fetch it with
```
rb-add.mjs
```
(above). Never hand-write the file.
Read the fetched file's own prop type/interface before wiring it up. Don't guess prop names or defaults even for a component you fetched — read what's actually in the file.
Install the printed dependencies (or pass
```
--install
```
).

Gotchas

Scoped-package deps break naive parsing. 10 components depend on scoped packages, e.g.
```
PixelTrail
```
→
```
@react-three/fiber@^9.3.0
```
. Splitting a dep string on
```
@
```
to get the name yields
```
""
```
for these.
```
rb-add.mjs
```
parses correctly (
```
/^(@[^/]+\/[^@]+|[^@]+)@?(.*)$/
```
); don't reimplement this by hand.
CSS variants are multi-file.
```
JS-CSS
```
/
```
TS-CSS
```
ship a component file and a sibling
```
.css
```
file (both must be written).
```
JS-TW
```
/
```
TS-TW
```
are single-file with Tailwind utility classes.
No category field in the registry.
```
registry.json
```
has name/title/deps/files only. Category (Text Animations / Animations / Components / Backgrounds) lives only in
```
references/catalog.md
```
(sourced from
```
reactbits.dev/llms.txt
```
).
verbatimModuleSyntax
TS projects: some fetched files import types alongside values in one
```
import {...}
```
statement (e.g.
```
import { motion, Transition } from 'motion/react'
```
) — split into a separate
```
import type {...}
```
if the project's tsconfig has
```
verbatimModuleSyntax: true
```
. This is a mechanical fix, not a reason to rewrite the component.

Categories (165 total)

Text Animations (32) · Animations (36) · Components (44) · Backgrounds (53). Full list with one-line descriptions and dependencies: references/catalog.md — a GitHub Action regenerates it daily from the live registry, so it stays current without a skill update. Manual refresh:

node scripts/gen-catalog.mjs

.

After installing

For a craft-bar review of the motion you just wired up (easing, duration, frequency-appropriateness, reduced-motion), the upstream repo ships separate skills at

DavidHDev/react-bits/AGENTS/SKILLS/

(

review-animations

,

improve-animations

,

find-animation-opportunities

,

apple-design

) — not bundled here, distinct concern (craft review vs. correct fetch/install).