开发工具精选项目

React Bits

面向 React 的动画、背景、文字效果与交互组件集合，提供 JavaScript、TypeScript、CSS 和 Tailwind 源码变体。

GitHub 访问官网

主要语言TypeScript

开源许可MIT + Commons Clause

项目类型开发工具

维护状态活跃维护

OVERVIEW

项目概述

React Bits 收录 140 多个可复制到项目中的 React 组件，覆盖文字动画、交互效果、通用组件和动态背景。它支持 shadcn Registry、jsrepo 与手动复制，让团队保留并直接修改组件源码。

React Bits 是一个公开源码的 React 动效组件集合，不是必须作为运行时整体安装的传统 UI 包。每个组件通常提供 JavaScript 或 TypeScript、普通 CSS 或 Tailwind CSS 的四种组合，开发者可通过 shadcn Registry、jsrepo 或手动复制把选中的源码纳入自己的代码库。免费目录与 React Bits Pro 是两个不同产品：公开仓库采用 MIT + Commons Clause，允许在个人和商业网站、应用或产品中使用，但禁止销售、再许可或重新分发组件本身、组件合集以及移植版本，因此不能把它简单理解为没有附加限制的 MIT 许可证。

组件规模140+

源码变体JS / TS × CSS / Tailwind

交付方式shadcn / jsrepo / 手动复制

FEATURES

主要特点

React Bits 将高表现力动效拆成可选择、可查看并可直接接管源码的 React 组件。

140+ 动效组件

官方目录包含大量文字、动画、组件和背景效果，适合从具体视觉需求反向查找实现。

丰富的文字动画

Split Text、Blur Text、Shiny Text、Text Pressure、Decrypted Text 和 Scroll Reveal 等组件覆盖常见标题与滚动叙事。

动态背景集合

Aurora、Particles、Galaxy、Dither、Threads、Light Rays、Prism 和 Liquid Ether 等效果可用于 Hero 或展示区域。

交互与通用组件

除纯视觉效果外，还提供 Animated List、Dock、Masonry、Carousel、Stepper、Spotlight Card 和 Bubble Menu 等界面组件。

指针与转场效果

Target Cursor、Magnet、Pixel Transition、Glare Hover、Electric Border 等组件可强化局部反馈与页面转场。

四种源码变体

同一组件通常可选择 JavaScript 或 TypeScript，并搭配普通 CSS 或 Tailwind CSS，便于适配现有工程约定。

复制并拥有源码

组件进入应用代码库后可以直接修改结构、样式、动画参数和类型，不需要等待上游暴露新的配置项。

shadcn Registry

可使用 shadcn CLI 查看并添加指定变体，沿用团队已有的 components.json、路径别名和源码管理方式。

支持 jsrepo 与手动复制

除 shadcn 外还可通过 jsrepo 获取组件，或从文档复制源码，不强制绑定单一安装渠道。

在线预览与参数调整

组件文档提供实时示例和可调参数，选择前就能观察视觉效果并生成更接近目标的起始代码。

创意生成工具

Background Studio、Shape Magic 和 Texture Lab 帮助组合背景、形状与纹理，补充固定组件目录。

按组件声明依赖

不同效果按需使用 Motion、GSAP、OGL 或其他库，无需为了一个简单组件引入完整动效集合。

React 之外的官方入口

官方仓库同时指向 Vue Bits 与 Svelte Bits，非 React 团队可评估对应生态版本，而不是自行移植受限源码。

USE CASES

适用场景

它更适合需要少量高辨识度视觉效果、并愿意自行负责性能与可访问性的 React 项目。

产品与活动落地页

用一个突出背景、标题动画或 Bento 区块提升首屏辨识度，同时保留可读的静态内容。

设计师与开发者作品集

交互式画廊、卡片、光标和文字效果适合展示创意能力与项目案例。

AI 与开发工具官网

粒子、网格、代码感文字和聚光效果适合表达技术型产品，但应控制 GPU 成本。

产品功能演示

Animated List、Stepper、Dock、Carousel 等组件可用于讲解流程、功能和交互原型。

强调文字的品牌叙事

Split Text、Scroll Reveal 和 Text Pressure 可强化标题节奏与滚动故事，而无需自建整套动画系统。

背景与视觉方向探索

先用创意工具和动态背景快速试验视觉语言，再把确认后的少数组件纳入正式页面。

已有 React 项目的局部增强

按组件复制源码，适合在不替换现有设计系统的情况下增强 Hero、空状态或重点营销区块。

EVALUATION

优点与注意事项

技术选型不仅要看能力，也要理解它带来的团队成本。

主要优点

React Bits 擅长的地方

组件数量多，文字、背景、光标、卡片和布局效果覆盖面广
同时提供 JS、TS、CSS 与 Tailwind 组合，适配不同 React 工程
复制源码后可直接修改，不受封闭组件 API 限制
既支持 shadcn Registry，也支持 jsrepo 和手动复制
在线预览和参数控制降低筛选与试验成本
普通 CSS 变体让未采用 Tailwind 的项目也能使用
创意工具可用于生成组件目录之外的背景、形状和纹理
公开仓库便于查看提交、Issue、依赖与具体实现
项目近期保持公开维护，社区可提交问题与改进

需要注意

采用前应考虑的问题

许可证不是无附加限制的 MIT

公开仓库采用 MIT + Commons Clause。可以在个人与商业终端产品中使用，但必须同时遵守 Commons Clause 的再分发限制。

不能销售或再分发组件本身

不得把组件、组件合集、再许可版本或移植版本作为主要价值进行销售、发布或分发；组件库、模板市场和代码生成产品尤其需要法律审查。

免费目录与 Pro 条款分开

React Bits Pro 使用私有 Registry，包含 Blocks 和 Templates，并有独立商业许可；购买 Pro 不会改变公开仓库的许可文字。

复制源码后要自行维护

组件不会像固定版本的 npm 依赖一样自动升级。应记录来源与复制时间，并通过代码审查选择性合并上游修复。

每个组件的依赖不同

有些组件仅使用 React 和 CSS，有些会依赖 Motion、GSAP、OGL、WebGL 或其他包；添加前应查看 Registry 内容和依赖列表。

复杂效果可能消耗 GPU 与 CPU

全屏 WebGL、粒子、模糊、Canvas 和持续指针追踪在移动设备上可能掉帧、耗电或提高内存占用。

必须尊重减少动态效果偏好

为 prefers-reduced-motion 用户关闭或简化非必要动画，并为自动播放、滚动绑定或持续运动提供可控降级。

可访问性需要项目自行审核

光标替换、Carousel、Menu、可点击卡片和动态文字不能只依赖视觉示例；需补充键盘操作、焦点状态、语义与屏幕阅读器测试。

服务端渲染要划分客户端边界

使用 window、Canvas、WebGL、ResizeObserver 或指针事件的组件在 Next.js 等环境中通常需要客户端组件、延迟加载或占位内容。

不要因为目录大就全部加入

复制过多组件会增加依赖、CSS、维护面与视觉噪音。先根据页面目标选择一到三个关键效果。

统一一种源码约定

同一项目应优先固定 TypeScript + Tailwind 或其他单一变体，避免四种实现同时存在并逐渐产生行为差异。

需要避免模板化视觉

热门效果容易在不同网站重复出现，应调整色彩、排版、节奏和交互，使组件服务于品牌而不是主导内容。

验证 React 与工具链兼容性

复制前检查组件代码、Peer Dependencies、React 版本和构建目标，尤其关注 WebGL 库、严格模式与服务端构建。

QUICK START

快速开始

下面以 TypeScript + Tailwind 变体为例，通过 shadcn Registry 按需加入文字动画、背景和卡片组件。

1初始化 shadcn/ui 配置

bash

npx shadcn@latest init

# 确认 components.json、Tailwind 与路径别名符合项目约定

2查看并添加 TypeScript + Tailwind 变体

bash

npx shadcn@latest view @react-bits/BlurText-TS-TW
npx shadcn@latest add @react-bits/BlurText-TS-TW
npx shadcn@latest add @react-bits/Aurora-TS-TW
npx shadcn@latest add @react-bits/SpotlightCard-TS-TW

3使用 Blur Text

tsx

import BlurText from "@/components/BlurText";

export function AnimatedHeading() {
  return (
    <BlurText
      text="让产品故事自然浮现"
      delay={120}
      animateBy="words"
      direction="top"
      className="text-4xl font-semibold tracking-tight"
    />
  );
}

4加入 Aurora 背景

tsx

import Aurora from "@/components/Aurora";

export function HeroBackground() {
  return (
    <div className="relative h-[32rem] overflow-hidden">
      <Aurora
        colorStops={["#7c3aed", "#22d3ee", "#f472b6"]}
        blend={0.5}
        amplitude={1}
        speed={0.5}
      />
    </div>
  );
}

5组合 Spotlight Card

tsx

import SpotlightCard from "@/components/SpotlightCard";

export function FeatureCard() {
  return (
    <SpotlightCard
      className="rounded-2xl border p-6"
      spotlightColor="rgba(168, 85, 247, 0.22)"
    >
      <h2 className="text-xl font-semibold">按需复制源码</h2>
      <p className="mt-2 text-sm text-zinc-400">
        只保留产品真正需要的动效与依赖。
      </p>
    </SpotlightCard>
  );
}

6为减少动态效果提供降级

css

@media (prefers-reduced-motion: reduce) {
  .react-bits-section *,
  .react-bits-section *::before,
  .react-bits-section *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

7执行项目检查

bash

npm run lint
npm run typecheck
npm run build

# 在真实移动设备上检查帧率、触摸、键盘与减少动态效果

下一步：先在独立页面验证一个组件，再检查其依赖、浏览器 API、移动端性能和减少动态效果设置；不要一次加入整个目录。

ALTERNATIVES

类似项目

这些项目同样覆盖 React 组件、设计系统、动画原语或可复制的营销界面。

React

用于构建 Web 和原生用户界面的组件化 JavaScript 库。

查看项目

Tailwind CSS

以实用类为核心的 CSS 框架，快速构建定制化界面。

查看项目

shadcn/ui

把可访问、可组合的组件源码直接加入项目，由团队完整拥有和定制的 UI 分发平台。

查看项目

Motion

面向 React 和 JavaScript 的生产级动画库，统一处理弹簧、手势、布局、滚动和退出动画。

查看项目

Magic UI

面向 React 与 Tailwind CSS 的开源动画组件集合，通过 shadcn Registry 将可编辑源码复制到项目中。

查看项目

Aceternity UI

面向 React、Next.js、Tailwind CSS 与 Motion 的动画组件和页面素材集合，通过 shadcn Registry 复制源码。

查看项目

Motion Primitives

基于 React 与 Motion 的可组合动画组件和原语，适合需要更细粒度控制的界面。

访问官网

Vue Bits

React Bits 官方仓库推荐的 Vue 生态实现，供 Vue 项目评估对应组件与使用条款。

访问官网

Svelte Bits

React Bits 官方仓库推荐的 Svelte 生态实现，面向 Svelte 项目的动画组件需求。

访问官网

COMPARISON

React Bits vs Magic UI

React Bits 与 Magic UI 都提供可复制到 React 项目中的动画组件，并支持 shadcn Registry。React Bits 的目录更偏向独立视觉效果、文字动画和动态背景，且为同一组件提供四种源码变体；Magic UI 更集中于 Tailwind 驱动的营销组件、Bento、设备展示和页面区块，其公开仓库采用 MIT 许可证。

比较维度	React Bits	Magic UI
核心定位	动画、文字、交互组件与动态背景集合	面向营销网站的动画组件与页面素材
目录规模	140+ 免费组件，按四大类别组织	较精炼的组件、特效、背景与设备 Mockup 目录
源码变体	JS / TS × CSS / Tailwind 四种组合	主要围绕 TypeScript、React 与 Tailwind
交付方式	shadcn、jsrepo 或手动复制源码	shadcn Registry 与手动复制源码
视觉侧重	文字动画、WebGL 背景、光标与实验性交互	Bento、Marquee、Globe、文字、Pattern 与营销展示
创意工具	Background Studio、Shape Magic、Texture Lab	文档预览、Registry 与官方 MCP
依赖模型	每个组件不同，可能使用 Motion、GSAP 或 WebGL 库	常见依赖集中在 Motion、Tailwind 与少量专用库
公开仓库许可	MIT + Commons Clause，限制组件再分发	MIT
付费内容	React Bits Pro 提供私有 Registry、Blocks 与 Templates	Magic UI Pro 提供额外商业组件与区块
框架延伸	官方仓库推荐 Vue Bits 与 Svelte Bits	主要围绕 React 生态
更适合	需要大量可选独立动效、普通 CSS 变体或实验背景	需要一致的 React 营销页面组件与公开 MIT 边界

如何选择

如果需要文字、背景、光标和 WebGL 等大量独立动效，或项目不使用 Tailwind，React Bits 的目录与四种变体更灵活；如果更看重统一的营销组件语言、Bento 与设备展示，或者需要无 Commons Clause 附加限制的公开 MIT 仓库，优先评估 Magic UI。无论选择哪一个，都应按需复制、记录来源，并用真实设备验证性能与可访问性。

VERIFICATION

资料核验

版本、维护信息与本页采用的官方资料来源。

最后核验2026 年 7 月 29 日

核验版本公开源码主线（无统一 Runtime Package 版本）

内容维护Docs100 编辑整理

项目维护状态活跃维护

本页依据 React Bits 官方首页、免费组件索引、Creative Tools、GitHub README 与 LICENSE 整理。核验时官网显示 140+ Components，公开仓库最近可见提交日期为 2026 年 7 月 29 日。React Bits Pro 是使用私有 Registry 的独立商业产品，不应与公开仓库的 MIT + Commons Clause 条款混为一谈。

维护状态核验2026 年 7 月 26 日 · 最近可见代码活动：2026 年 7 月 29 日

官方仓库未归档，核验时最近可见的代码活动日期为 2026 年 7 月 29 日。该状态表示项目近期仍有公开维护活动，不代表固定发布频率或长期支持承诺。

查看官方仓库

官方来源6 项

React Bits 官方首页React Bits

React Bits 组件索引React Bits

React Bits Creative ToolsReact Bits

React Bits GitHub 仓库DavidHDev · GitHub

React Bits LICENSEDavidHDev · GitHub

React Bits ProReact Bits