Hardgraph

SKILL PROCEDURE

React Bits

Use when adding animated React components — text effects, backgrounds, cursors, scroll and reveal animations — from React Bits, choosing between its JS/TS and CSS/Tailwind variants, installing by CLI or copy, or resolving which animation library a component needs.

reactanimationui-componentsgsapmotion
BEGINNER GUIDE

Understand React Bits before using it

CATEGORY

React Bits is catalogued under Frontend.

START HERE WHEN

Your work repeatedly involves the concepts tagged above. Open the full procedure below when the current task matches them.

Compare related skills

SKILLCATEGORYSHARED CONCEPTSEXPLANATION
React BitsFrontendCurrent skillUse when adding animated React components — text effects, backgrounds, cursors, scroll and reveal animations — from React Bits, choosing between its JS/TS and CSS/Tailwind variants, installing by CLI or copy, or resolving which animation library a component needs.
Three.jsFrontendSame categoryUse when rendering interactive 3D graphics in a browser with Three.js — building or debugging a scene graph, choosing WebGLRenderer vs WebGPURenderer, writing custom materials or TSL shaders, loading models, or deciding between raw Three.js and react-three-fiber. Published by HardGraph, a curated graph of provenance-backed knowledge for AI agents.
Assistant UIAI and agents
react
assistant-ui — React components for building AI chat interfaces. Use when building a chat UI (thread list, message composer, markdown rendering, tool-call parts, streaming), wiring it to a model runtime (Vercel AI SDK, LangChain, custom), using the CLI to scaffold and add components, adapting a shadcn/Radix/Base UI style, or running it on web, React Native, or the terminal. Published by HardGraph, a curated graph of provenance-backed knowledge for AI agents.

React Bits

A collection of copy-friendly animated React components: UI elements, animations, backgrounds, and text animations. It is not a component library you depend on — you take the source into your project.

That distinction drives everything below.

You own the code after you take it

There is no versioned package to upgrade and no API to keep stable. A component becomes your file the moment you add it, so:

  • Upstream fixes will not reach you. Getting them means re-copying and re-applying your edits.
  • Edit freely. There is no compatibility contract to break.
  • Pin nothing, but record where a component came from, or the next person cannot tell hand-written code from vendored code.

Four variants, and you pick one deliberately

Every component ships four ways — JS or TS, each with CSS or Tailwind — and all four are kept in sync upstream. The CLI encodes the choice in the name:

npx shadcn@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>
npx jsrepo@latest  add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>

<LANG> is JS or TS; <STYLE> is CSS or TW.

Match your project rather than the example you found. Mixing variants across one codebase means some components carry stylesheets and others carry utility classes, which is a maintenance cost with no upside.

Check the dependencies before you paste

This is the step that actually bites. Dependencies vary per component — some need gsap, others motion, others three or ogl. A component copied without its dependency fails at import, and the error names the missing library rather than the component, so it reads like a project misconfiguration.

Read the component source for its imports before adding it, and install what it actually uses. A single text effect can pull in a WebGL library you did not intend to ship.

Where to look

The vendored source under references/vendor/repos/ is the authoritative reference — it is the component code itself, in the TypeScript + CSS variant. Read the component you plan to use directly; it is short, self-contained, and tells you its dependencies unambiguously.

The repository also carries its own agent-facing guidance under AGENTS/SKILLS/, covering animation review, auditing, and design standards.

References

Hardgraph / curated knowledge for agents.

STATIC EXPORT · CANONICAL SOURCE