# react-bits

**Repository Path**: gitsharp/react-bits

## Basic Information

- **Project Name**: react-bits
- **Description**: 一系列精美的 React 动画组件（背景效果、文本动画、卡片等），非常适合构建令人印象深刻的网站。它以 shadcn/ui 项目的形式分发，可以通过命令行从 shadcn/ui 注册表获取，也可以通过传统的复制粘贴方式添加到代码库中。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-26
- **Last Updated**: 2026-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<div align="center">
	<br>
	<br>
    <picture>
      <source media="(prefers-color-scheme: light)" srcset="src/assets/logos/reactbits-gh-black.svg">
      <source media="(prefers-color-scheme: dark)" srcset="src/assets/logos/reactbits-gh-white.svg">
      <img src="src/assets/logos/reactbits-gh-black.svg" alt="react-bits logo" width="600">
    </picture>
	<br>
	<br>
  <strong>The largest & most creative library of animated React components.</strong>
  <br />
  <sub>Stand out with 130+ free, customizable animations for text, backgrounds, and UI.</sub>
	<br>
	<br>
  <a href="https://github.com/davidhdev/react-bits/stargazers"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/davidhdev/react-bits"></a>
  <a href="https://github.com/davidhdev/react-bits/blob/main/LICENSE.md"><img alt="License" src="https://img.shields.io/badge/License-MIT+Commons_Clause-magenta"></a>
  <br>
  <br>
  <a href="https://reactbits.dev/">📖 Documentation</a> · <a href="https://reactbits.dev/get-started/installation">⚡ Quick Start</a> · <a href="https://reactbits.dev/tools">🛠️ Tools</a>
</div>

<br />

<div align="center">
  <img src="src/assets/common/gh-showcase.png" alt="React Bits component showcase" width="1000">
</div>

<br />

## ✨ Why React Bits?

React Bits helps you **ship stunning interfaces faster**. Instead of spending hours crafting animations from scratch, grab a polished component and customize it to fit your vision.

> 💬 **Text Animations** · 🌀 **Animations** · 🧩 **Components** · 🖼️ **Backgrounds**

## 🚀 Features

- **130+ components** — text animations, UI elements, and backgrounds, growing weekly
- **Minimal dependencies** — lightweight and tree-shakeable
- **Fully customizable** — tweak everything via props or edit the source directly
- **4 variants per component** — JS-CSS, JS-TW, TS-CSS, TS-TW (everyone's happy)
- **Copy-paste ready** — works with any modern React project

## 🛠️ Creative Tools

<div align="center">
  <img src="src/assets/common/tools-readme.webp" alt="React Bits Tools" width="1000" style="border-radius: 30px; max-width: 1920px;">
</div>

<hr />

### Beyond components, React Bits offers **free creative tools** to supercharge your workflow:

| Tool                                                 | What it does                                                                             |
| ---------------------------------------------------- | ---------------------------------------------------------------------------------------- |
| **[Background Studio](https://reactbits.dev/tools)** | Explore animated backgrounds, customize effects, export as video/image/code              |
| **[Shape Magic](https://reactbits.dev/tools)**       | Create inner rounded corners between shapes, export as SVG, React code or clip-path code |
| **[Texture Lab](https://reactbits.dev/tools)**       | Apply 20+ effects (noise, dithering, ASCII) to images/videos and export in high quality  |

## 📦 Installation

React Bits supports [shadcn](https://ui.shadcn.com/) and [jsrepo](https://jsrepo.dev) for quick CLI installs.

```bash
# Example: Add a component via shadcn
npx shadcn@latest add @react-bits/BlurText-TS-TW
```

Each component page includes copy-ready CLI commands. See the [installation guide](https://reactbits.dev/get-started/installation) for full details.

You can also select your preferred technologies, and copy the code manually.

## 🚀 Sponsors

React Bits is proudly supported by these amazing sponsors:

### Diamond

<a href="https://www.shadcnblocks.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcnblocks.svg">
    <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnblocks-lightmode.svg">
    <img src="public/assets/sponsors/shadcnblocks.svg" alt="shadcnblocks.com" style="height: 50px;">
  </picture>
</a>
&nbsp;&nbsp;&nbsp;
<a href="https://shadcnstudio.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=diamond&ref=reactbits" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcnstudio.svg">
    <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcnstudio-lightmode.svg">
    <img src="public/assets/sponsors/shadcnstudio.svg" alt="shadcn studio" style="height: 50px;">
  </picture>
</a>

### Platinum

<a href="https://pro.tailark.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=platinum&ref=reactbits" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/tailark.svg">
    <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/tailark-lightmode.svg">
    <img src="public/assets/sponsors/tailark.svg" alt="Tailark" style="height: 50px;">
  </picture>
</a>

### Silver

<a href="https://nextjsweekly.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/nextjsweekly.svg">
    <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/nextjsweekly-lightmode.svg">
    <img src="public/assets/sponsors/nextjsweekly.svg" alt="Next.js Weekly" style="height: 40px;">
  </picture>
</a>
&nbsp;&nbsp;&nbsp;
<a href="https://shadcncraft.com/?utm_source=reactbits&utm_medium=sponsor&utm_campaign=silver&ref=reactbits" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="public/assets/sponsors/shadcncraft.svg">
    <source media="(prefers-color-scheme: light)" srcset="public/assets/sponsors/shadcncraft-lightmode.svg">
    <img src="public/assets/sponsors/shadcncraft.svg" alt="Shadcncraft" style="height: 40px;">
  </picture>
</a>

<hr />

**[Become a sponsor](https://reactbits.dev/sponsors)** — Get your brand in front of 500K+ developers monthly.

## 🤝 Contributing

We'd love your help! Check the [open issues](https://github.com/DavidHDev/react-bits/issues) or submit ideas via the [feature request template](https://github.com/DavidHDev/react-bits/issues/new?template=2-feature-request.yml).

Please read the [contribution guide](https://github.com/DavidHDev/react-bits/blob/main/CONTRIBUTING.md) first — thanks for making React Bits better!

## 🙌 Contributors

<a href="https://github.com/davidhdev/react-bits/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=davidhdev/react-bits" />
</a>

## 👤 Maintainer

**[David Haz](https://github.com/DavidHDev)** — creator & lead maintainer

## 🌐 Official Ports

| Framework | Link                                      |
| --------- | ----------------------------------------- |
| Vue.js    | [vue-bits.dev](https://vue-bits.dev/)     |
| Svelte    | [sveltebits.xyz](https://sveltebits.xyz/) |

## 📊 Stats

![Repobeats analytics](https://repobeats.axiom.co/api/embed/b1bf4dc0226458617adbdbf5586f2df953eb0922.svg 'Repobeats analytics image')

## 🗳️ Credit

React Bits occasionally draws inspiration from publicly available code examples. These are rewritten as full-fledged, customizable components for JS, TS, CSS, and Tailwind. If you recognize your work, [open an issue](https://github.com/DavidHDev/react-bits/issues) to request credit.

## 📄 License

[MIT + Commons Clause](https://github.com/davidhdev/react-bits/blob/main/LICENSE.md) — free for personal and commercial use.