Reading the repo
Opening the box…
Reading the repo
Opening the box…
Assembly instructions
The largest open-source library of animated, interactive, and customizable React & Next.js components for building standout web products and experiences. Built for humans and AI agents.
Saved setup from 10 h ago
Will it work on macOS?
Then run bash setup.sh. It stops at the first error and is safe to run again. Servers and tests aren't started; it lists them at the end. Read it first.
Needs Git: xcode-select --install
git clone https://github.com/DavidHDev/react-bits.git cd react-bits
Node.js LTS (no version pinned)
# needs nvm: brew install nvm (or https://github.com/nvm-sh/nvm) nvm install --lts
npm ci
npm run dev
Add any component with the shadcn CLI. The suffix picks the flavor: JS or TS, then CSS or TW.
npx shadcn@latest add @react-bits/SplitText-TS-TW
Or with jsrepo:
npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TW
Prefer to copy by hand? Open a component's Code tab, pick your flavor and paste the files into your project. The installation guide covers both.
React Bits works with the shadcn MCP server, so Claude Code, Cursor, Codex, VS Code and Antigravity can find and add components for you. Add the registry to your components.json:
{
"registries": {
"@react-bits": "https://reactbits.dev/r/{name}.json"
}
}
Then connect your client, for example npx shadcn@latest mcp init --client claude, and ask for what you need. See the MCP guide for every client.
No reports for macOS yet.
GitManual AI Agent reads the 3 key files and writes a step-by-step guide for macOS. Once written, it's saved for everyone.