DOCSEARCHbyAlgolia
Submit Docs

React Bits

repository·main·Indexed 13 days ago

https://github.com/davidhdev/react-bits

An open-source library of over 165 free, customizable, and animated React components for text animations, UI elements, and backgrounds. Components are available in four variants (JS-CSS, JS-TW, TS-CSS, and TS-TW) and can be installed via the shadcn CLI. The project also includes creative tools such as Background Studio, Shape Magic, and Texture Lab for generating visual assets and code.

Tokens
9.4K
Snippets
38
Records
41
Agent score
99%

What's inside React Bits

  1. Overview of React Bits features

    main

    React Bits is a library of over 165 animated React components designed for text animations, UI elements, and backgrounds.

    Key characteristics:

    • Minimal dependencies: Lightweight and tree-shakeable.
    • Fully customizable: Components can be tweaked via props or by editing the source code directly.
    • Multiple variants: Every component is provided in four technology combinations: JS-CSS, JS-TW, TS-CSS, and TS-TW.
    • Copy-paste ready: Designed to work with any modern React project.

  3. Explore React Bits Creative Tools

    main

    Beyond the component library, React Bits provides several web-based tools to assist in your creative workflow:

    • Background Studio: Explore and customize animated backgrounds. You can export your creations as video, images, or code.
    • Shape Magic: A tool for creating inner rounded corners between shapes. Supports exporting as SVG, React code, or clip-path code.
    • Texture Lab: Apply over 20 visual effects (such as noise, dithering, and ASCII) to images or videos, with high-quality export options.

  4. Install React Bits components via shadcn

    main

    You can quickly add React Bits components to your project using the shadcn CLI. Each component follows a specific naming convention that includes the component name and the technology variant (e.g., @react-bits/ComponentName-Variant).

    Common variants include:

    • JS-CSS (JavaScript + CSS)
    • JS-TW (JavaScript + Tailwind)
    • TS-CSS (TypeScript + CSS)
    • TS-TW (TypeScript + Tailwind)
    # Example: Add the BlurText component using TypeScript and Tailwind
npx shadcn@latest add @react-bits/BlurText-TS-TW

  6. Install Light Pillar background via shadcn

    main

    To use the Light Pillar background component, install it using the shadcn CLI command provided below. Once installed, you can customize it with props such as topColor, bottomColor, intensity, rotationSpeed, interactive, glowAmount, pillarWidth, pillarHeight, noiseIntensity, and pillarRotation.

    npx shadcn@latest add "https://reactbits.dev/default/backgrounds/light-pillar"

  7. Install Floating Lines background via shadcn

    main

    To use the Floating Lines background component, install it using the shadcn CLI command provided below. Once installed, you can customize it with props such as linesGradient (array of 2-8 colors), animationSpeed, interactive, bendRadius, bendStrength, mouseDamping, parallax, and parallaxStrength.

    npx shadcn@latest add "https://reactbits.dev/default/backgrounds/floating-lines"

  8. Add React Bits components via jsrepo or shadcn

    main

    React Bits components can be added to your project using either jsrepo or the shadcn CLI. The command format depends on the component's name, the programming language (e.g., JS, TS), and the styling method (e.g., CSS, TW for Tailwind).

    Using jsrepo

    Use jsrepo to pull components directly from the React Bits registry. The URL pattern is https://reactbits.dev/r/{ComponentName}-{Language}-{Style}.

    Using shadcn

    Use the shadcn CLI to add components via the @react-bits registry. The package pattern is @react-bits/{ComponentName}-{Language}-{Style}.

    Command Prefixing

    Commands can be executed using various package managers:

    • pnpm: pnpm dlx
    • npx: npx
    • yarn: yarn
    • bun: bun x --bun
    # Example using jsrepo with pnpm
pnpm dlx jsrepo@latest add https://reactbits.dev/r/ComponentName-JS-TW

# Example using shadcn with npx
npx shadcn@latest add @react-bits/ComponentName-JS-TW

  9. Install Pixel Snow background via shadcn

    main

    To use the Pixel Snow background component, install it using the shadcn CLI command provided below. Once installed, you can customize it with props such as color, flakeSize, minFlakeSize, pixelResolution, speed, depthFade, farPlane, brightness, gamma, density, variant (options: square, round, snowflake), and direction.

    npx shadcn@latest add "https://reactbits.dev/default/backgrounds/pixel-snow"

  10. Install Gradient Blinds background via shadcn

    main

    To use the Gradient Blinds background component, install it using the shadcn CLI command provided below. Once installed, you can customize it with props such as gradientColors (array of 2-8 colors), angle, noise, blindCount, blindMinWidth, mouseDampening, mirrorGradient, spotlightRadius, spotlightSoftness, spotlightOpacity, distortAmount, and shineDirection (options: left, right, none).

    npx shadcn@latest add "https://reactbits.dev/default/backgrounds/gradient-blinds"

  11. Install Faulty Terminal background via shadcn

    main

    To use the Faulty Terminal background component, install it using the shadcn CLI command provided below. Once installed, you can customize it with props such as scale, digitSize, scanlineIntensity, glitchAmount, flickerAmount, noiseAmp, chromaticAberration, dither, curvature, tint, mouseReact, mouseStrength, and brightness.

    npx shadcn@latest add "https://reactbits.dev/default/backgrounds/faulty-terminal"

  12. Install Plasma background via shadcn

    main

    To use the Plasma background component, install it using the shadcn CLI command provided below. Once installed, you can customize it with props such as color, speed, direction (options: forward, reverse, pingpong), scale, opacity, mouseInteractive, iterations, renderScale, targetFps, and maxDpr.

    npx shadcn@latest add "https://reactbits.dev/default/backgrounds/plasma"