react-bits

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

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:

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

1. Confirm the variant — JS or TS, CSS or Tailwind. Default to matching the project's existing files; ask if genuinely ambiguous.
2. Find the component — grep references/catalog.md (offline, 165 entries with category + description + deps) or --list.
3. Fetch it with rb-add.mjs (above). Never hand-write the file.
4. 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.
5. 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).