Philotheephilix 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
- 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.mjsparses correctly (/^(@[^/]+\/[^@]+|[^@]+)@?(.*)$/); don't reimplement this by hand. - CSS variants are multi-file.
JS-CSS/TS-CSSship a component file and a sibling.cssfile (both must be written).JS-TW/TS-TWare single-file with Tailwind utility classes. - No category field in the registry.
registry.jsonhas name/title/deps/files only. Category (Text Animations / Animations / Components / Backgrounds) lives only inreferences/catalog.md(sourced fromreactbits.dev/llms.txt). verbatimModuleSyntaxTS projects: some fetched files import types alongside values in oneimport {...}statement (e.g.import { motion, Transition } from 'motion/react') — split into a separateimport type {...}if the project's tsconfig hasverbatimModuleSyntax: 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).