React Bits

https://www.reactbits.dev/
Admin
React Bits is a free, open-source collection of 110+ highly customizable animated React components...
Tokens:416,359
Snippets:3,728
Trust Score:7.8
Update:6 days ago
Show doc for...
Tokens:
Raw
### Install three package

Source: https://www.reactbits.dev/animations/blob-cursor

Required dependency for the Blob Cursor component. Install using npm.

```bash
npm install three
```

--------------------------------

### Install dependencies for Antigravity

Source: https://www.reactbits.dev/animations/antigravity

Install the required packages @react-three/fiber and three using npm.

```bash
npm install @react-three/fiber three
```

--------------------------------

### Install dependencies: gsap and @gsap/react

Source: https://www.reactbits.dev/c/text-animations/split-text

Run this command to install the required packages for the Split Text component.

```bash
npm install gsap @gsap/react
```

--------------------------------

### Install motion dependency

Source: https://www.reactbits.dev/c/animations/orbit-images

Install the required 'motion' package to use the Orbit Images component.

```bash
npm install motion
```

--------------------------------

### Initialize shadcn MCP server for VS Code

Source: https://www.reactbits.dev/get-started/mcp

Run this command to set up the shadcn MCP server for VS Code, then open .vscode/mcp.json and click Start next to the shadcn server.

```bash
npx shadcn@latest mcp init --client vscode
```

--------------------------------

### Import and use SplitText component

Source: https://www.reactbits.dev/get-started/installation

Render the installed component like any other React component. This example shows importing SplitText and using it with text, delay, and duration props.

```jsx
import SplitText from "./SplitText";

<SplitText
  text="Hello, you!"
  delay={100}
  duration={0.6}
/>
```

--------------------------------

### Initialize shadcn MCP server for Cursor

Source: https://www.reactbits.dev/get-started/mcp

Run this command to set up the shadcn MCP server for Cursor, then open Cursor Settings and enable the shadcn MCP server.

```bash
npx shadcn@latest mcp init --client cursor
```

--------------------------------

### Install matter-js dependency

Source: https://www.reactbits.dev/c/text-animations/falling-text

Install the required matter-js package using npm.

```bash
npm install matter-js
```

--------------------------------

### Install vgpu dependency

Source: https://www.reactbits.dev/backgrounds/shape-waves

Install the required vgpu package using npm.

```bash
npm install vgpu
```
Tokens:
Raw