Bits 横扫前端三大框架
前端这两年是真的越来越卷。
以前做官网，把布局、响应式和基础交互做好，基本就够用了。
现在不一样了。打开一些 AI 产品官网、独立开发者作品站，粒子、流体、3D、文字动画、鼠标跟随、Shader 背景几乎成了标配。
问题是，这些效果看着爽，真要从零实现，背后往往要折腾不少时间和代码。
所以 React Bits 火了。
更关键的变化发生在最近几个月：它已经把 Vue Bits、Svelte Bits 正式列为 Official Ports，React、Vue、Svelte 前端三大框架，终于凑齐了。
同一个 Bits，三套实现。这张官方图里的数字已经开始滞后了，下面会给出最新值
一、先把最新的账算清楚
网上流传最广的一组数字是「React Bits 47K Star / 171 个组件、Vue Bits 和 Svelte Bits 各 130+」，那是 10 月中旬的数据。
截至 2026 年 11 月，我逐个核对了三个官网和 GitHub 仓库：
| 项目 | 官网首屏标注 | 栏目文案 | GitHub Star | 分类数 |
|---|---|---|---|---|
| React Bits | 217 个组件 | 215+ | 51.4K | 5 |
| Vue Bits | 209+ 个组件 | 130+ | 4.6K | 5 |
| Svelte Bits | — | 130+ | 394 | 4 |
有两件事值得单独说。
第一，三周涨了 4K 多星。 React Bits 从 47.1K 到 51.4K，在创意组件这个细分赛道里，这个速度基本没有对手。
第二，官网自己的数字都对不上。 React Bits 首屏写 217，下面栏目写 215+；Vue Bits 首屏写 209+，栏目还挂着 130+。这不是笔误，是组件加得太快、文案没跟上——对用户来说算个信号：这个库在高速迭代，别把某个具体数字当契约。
二、React Bits：从 171 卷到 217
先看最早火起来的 React Bits。
它和 Ant Design、Element Plus 这种传统组件库完全是两个方向。这里没有一堆表格、表单和后台组件，它专门解决一件事：
让你的网站变帅。
旧版首页：170+ 组件、47.1K Star
新版首页：主视觉换成了 GradientWaves，右上角多了 Pro 入口
2.1 五个分类
最早是四类，现在官方明确是五类：
| 分类 | 内容 |
|---|---|
| Backgrounds | 背景层效果：Aurora、Ballpit、Beams、Dot Field、Shape Grid、Galaxy 等 |
| Text Animations | 文字动效：Blur Text、Shiny Text、Split Text、Particle Text、Glitch Text 等 |
| Animations | 交互动效：Blob Cursor、Pixel Trail、Ribbons、Antigravity、Magic Rings 等 |
| Components | 可直接用的 UI 组件：Dock、Card Swap、Masonry、Circular Gallery 等 |
| Micro | 新增的微交互层：按钮按压、开关、图标反馈这类小动作 |
第五类 Micro 是最近补上的，官网导航里已经能看到 Hold Button 这类纯微交互组件。这个方向其实很对——绝大多数「高级感」不是靠一个炫酷背景撑起来的，而是按钮按下去那 200ms 的手感。
2.2 三个典型效果
Ballpit：满屏带物理碰撞的 3D 小球，鼠标能推着它们动。放在 Hero 区域，视觉冲击力非常强。
右侧的 Customize 面板可以直接调 Ball Count、Gravity、Friction、Wall Bounce，改完复制代码。
Aurora：一层缓慢流动的极光背景，深色科技风的标配。
Particle Text：文字由几千个粒子聚合而成，可以设置散射距离、聚合时长、排斥半径。
这三个例子有个共同点：参数是暴露出来的。你不需要改源码去调数值，文档页上就能拖。
2.3 四种变体，一条命令
每个组件都提供 JS + CSS、TS + CSS、JS + Tailwind、TS + Tailwind 四种组合，安装命令跟着你选的变体变：
# TypeScript + Tailwind 版本
npx shadcn@latest add @react-bits/Aurora-TS-TW
代码不会进 node_modules，而是直接落进你的 components/ 目录：
✔ Created 1 file:
- components/Aurora.tsx
改渐变、改速度、改混合模式，都是改自己仓库里的文件。
2.4 顺带长出来的五个工具
这部分官方没怎么宣传，但挺实用。React Bits 现在附带五个免费浏览器工具：
- Background Studio：挑一个动态背景，用预设起手，实时调参，最后导出代码、4K 图或循环视频
- Center Stage：把截图/录屏塞进 3D 设备壳，直接产出产品图
- Shape Magic：用 3D 材质做 logo，导出 SVG / PNG / favicon / 视频 / React 组件
- Texture Lab：在图片、视频或摄像头上叠加动效，输出图片、视频、GIF 或可分享的样式
- Sound Lab：做界面音效和视频音效，一条命令装进项目，或直接下 WAV / MP3 / OGG
Background Studio 和 Texture Lab 的价值被低估了——做官网最费时间的往往不是写组件，是调出一个不刺眼、有层次的背景；调完还要出 OG 图、出演示视频。这两个工具把这条链路接上了。
2.5 免费之上还有一层 Pro
React Bits 目前是「免费 + Pro」双轨：
| 层级 | 内容 |
|---|---|
| 免费 | 217 个组件、5 个浏览器工具、四种变体 |
| Pro | 230 个组件、300 个页面区块、300 个 App UI 区块、15 套多页全站模板、20 个 Agent Skills |
免费部分够做个人站和产品官网的 Hero；Pro 补的是「整站」——定价表、FAQ、页脚、后台表格这些不性感但必须有的东西。
值得注意的是那 20 个 Agent Skills。这个信号比组件数量本身更重要，下一节展开。
三、Vue Bits：从 130+ 追到 209+
以前经常出现一个很扎心的场景：在 X 上看到一个巨帅的前端效果，兴奋地点进去——React。Vue 用户默默关闭页面。
现在这个问题基本解决了。Vue Bits 已经是 React Bits 官方列出的 Vue Port，由同一位作者 David Haz 维护。
首屏写的是 209+ components，GitHub 4.6K Star。官网栏目里还挂着「130+」的旧文案——又是同一批没更新的字。
分类上，Vue Bits 也已经补齐到五类，并且新增了 Micro-Interactions（微交互）这一栏，跟 React Bits 的节奏保持一致。
3.1 效果示例
Color Bends：大量流动、弯曲的彩色光带，官网拿它做首页背景。
它的参数面板值得看一眼：Warp Strength、Mouse Influence、Parallax、Noise、Iterations、Intensity、Band Width——这不是一个「换个颜色」级别的组件，是能调出完全不同质感的那种。
3.2 安装
两种方式，都直接把源码落进项目：
# 方式一：jsrepo
npx jsrepo add https://vue-bits.dev/r/Aurora.json
# 方式二：shadcn registry
npx shadcn@latest add @vue-bits/aurora
然后它就是一个普通的 Vue 组件：
<script setup lang="ts">
import Aurora from './Aurora.vue'
</script>
<template>
<Aurora :color-stops="['#171D22', '#7cff67', '#171D22']" :speed="1" :blend="0.5" />
</template>
3.3 技术栈
Vue 3 + TypeScript + Tailwind，底层直接用 ogl、GSAP、Three.js 这些库，没有 vue-bits 这个包。
官方页面把这件事讲得很直白：
Vue Bits isn't a package you depend on. Each component lands in your repo as source you own.
没有任何 wrapper 库，也就没有任何锁定。项目明天关站，你已经加进来的组件照样跑。
支持 Vite、Nuxt、Astro、Vitesse。
四、Svelte Bits：130+，Svelte 5
React、Vue 都来了，Svelte 自然也不能缺席。Svelte Bits 同样是官方 Port，目前 130+ 组件，GitHub 394 Star——体量最小，但也最年轻。
Shape Grid：一层会随鼠标流动的网格，格子形状可选方形/六边形/圆形/三角形。
Magic Rings：一圈圈发光弧线，鼠标跟随、点击爆开都能配。
有意思的是，同一个 Magic Rings，Svelte 版的参数面板比 Vue 版明显更细：Vue 版只有 9 个参数，Svelte 版有 21 个，多了 Follow Mouse、Mouse Influence、Click Burst、Hover Scale、Fade In/Out、Blur、Noise、Rotation 这些。端口不完全是从属关系，后做的反而在某些组件上补了功能。
技术栈是 Svelte 5 + TypeScript + Tailwind，动画依赖 GSAP / Motion / OGL / Three.js / postprocessing / matter-js。
安装同理：
npx jsrepo add https://sveltebits.xyz/r/aurora.json
分类只有四类，Micro 还没跟上——这是三家目前最明显的差距。
五、三家的差异不只是数量
把最新数据摆到一起：
| 维度 | React Bits | Vue Bits | Svelte Bits |
|---|---|---|---|
| 组件数 | 217 | 209+ | 130+ |
| Star | 51.4K | 4.6K | 394 |
| 分类 | 5 类（含 Micro） | 5 类（含 Micro） | 4 类 |
| 技术栈 | React + TS + Tailwind，Framer Motion | Vue 3 + TS + Tailwind，OGL / GSAP | Svelte 5 + TS + Tailwind，GSAP / Three.js |
| 变体 | 4 种（JS/TS × CSS/TW） | 按组件 | 按组件 |
| 安装 | shadcn CLI | jsrepo + shadcn | jsrepo + shadcn |
| 浏览器工具 | 5 个 | 无 | 无 |
| 付费层 | Pro | 无 | 无 |
只看数字会觉得 Vue 和 Svelte 是「缩水版」。但用下来我的判断是：它们的差距主要在「量」，不在「质」。
Aurora、Ballpit、Magic Rings、Blob Cursor、Pixel Trail 这些最出圈的组件，三家都有，效果基本一致。缺的是长尾——那些一年用一次、但真需要时找不到就只能自己写的冷门效果。
另外 React Bits 的五个浏览器工具是独一份，Vue / Svelte 版暂时没有对应物。
六、真正值得注意的，是「源码交付」这件事
我觉得这三个项目最有意思的地方，不在效果，在分发方式。
传统组件库是这样的：
npm i xxx-ui → import { Button } from 'xxx-ui' → 想改样式，覆盖 class
Bits 是这样的：
npx shadcn@latest add @react-bits/Aurora-TS-TW → Aurora.tsx 出现在你的 components/ 里
差别在于你拿到的是盒子还是零件。
用 npm 包，你拿到一个关着盖子的盒子。想改只能在外面贴一层——加个 class、套个 wrapper、传个 style。人家一升级，你贴的那层就可能失效。
拿到源码就不一样。每个数都摊在那儿：渐变的三个色值、噪声强度、旋转角度。想把紫改成墨绿，改一个字符串就行。
官方对此的表述是：
The code is yours to play around with — modify styling, functionality, anything goes!
这条路线其实已经被 shadcn/ui 验证过了。Bits 做的是把它搬到「动效组件」这个更依赖定制的品类上——动效这东西，本来就没有「通用参数」可言，一定要按品牌调。
七、「AI-Ready」已经落到界面上了
原文提过一句「官方强调 AI-Ready，可以配合 Cursor、Copilot、v0 使用」。当时这更像一句宣传语，现在它变成了具体功能。
第一，每个组件页都有 Copy for AI / Copy Prompt 按钮。
点一下，直接生成一段拿来就能用的提示词，把组件名、当前参数、用法一起打包给 AI。比你自己描述「我想要那个绿色流动的光带，参数大概是……」高效得多。
第二，Pro 里带了 20 个 Agent Skills。
这个信号比 20 个数值本身重要——一个组件库开始给 AI 编程工具提供「设计品味」，说明它在把「怎么用这套东西」也产品化。
第三，安装命令本身就适合 AI 执行。
npx shadcn@latest add @react-bits/xxx 这种形式，对 AI Agent 极其友好：不需要理解包管理树，不需要解决 peer dependency 冲突，执行一条命令，文件就到位了。
这三件事叠起来，指向一个很实在的结论：这个库的设计假设，是「组件由 AI 来拼装」。人负责挑，AI 负责接。
八、一套可复用的落地流程
如果你打算真的用它搭站，我把流程压成三步。
第一步，先让 AI 认识这个库。
单独开一个对话，把网址发过去，让它自己读一遍：
请访问并分析 React Bits 这个网站，说明：
1）它提供什么类型的组件，分哪几类，各有多少个
2）免费和付费的边界在哪里
3）它适合什么场景，不适合什么场景
这一步最多人跳过，但收益最高。跳过的话，AI 只会抓几个关键词，挑出来的往往是「最出名」的，不是你最需要的。先让它把这 200 多个组件过一遍，后面提需求时它是在一个清单里挑，而不是在黑暗里摸。
第二步，带着组件库提需求。
请使用项目中的免费组件，从零搭建一个 AI 数据分析产品的官网。
结构包含：Hero、核心能力、使用场景、客户评价、定价页、FAQ。
视觉方向：深色 + 渐变，图表和数字作为视觉锚点。
若某模块缺现成组件，组合现有组件或补少量自定义代码，不要引入付费依赖。
关键是那句「使用项目中的免费组件，不要引入付费依赖」——加不加这句，产出差别很大。
第三步，挑效果，让 AI 改参数。
别自己从零描述想要什么。去官网把一个一个效果过一遍，看到对的就点 Copy for AI，把提示词和你的品牌色一起丢给 AI。
九、几个需要留意的点
数字别当契约。 官网首屏和栏目文案至今对不上，说明迭代速度超过文案更新速度。看数量当参考，具体某个组件有没有，去索引页搜。
动效依赖很重。 Three.js、OGL、GSAP、matter-js 都是实打实的体积。别在首页堆五个 3D 背景，先看首屏的 LCP。一个 Hero 用 Ballpit，下面全静态，是常见且合理的组合。
「高级感」不等于「动效多」。 更常见的失败方式是把能加的效果全加上——背景在动、标题在动、光标在动、卡片在动，滚动时还在动。真正决定深色页面好不好看的，是层次，动效只占最后那一点点。
许可要看清。 三家都是 MIT 附加 Commons Clause：商用、做官网、做付费产品都没问题，唯一限制是不能把组件本身打包转售。这条对绝大多数用法没有影响，但如果你做的是模板市场，得注意。
Vue / Svelte 版会有滞后。 新组件通常先在 React 版落地，端口要等一段时间。急着用某个新效果，先去 React 版看有没有，没有就自己移植——源码模式的好处这时候体现出来了。
十、链接
三个官网，建议直接收藏：
- React Bits：https://www.reactbits.dev
- Vue Bits：https://vue-bits.dev
- Svelte Bits：https://sveltebits.xyz
同一位作者 David Haz 的作品，Star 数分别是 51.4K / 4.6K / 394。
前端三大框架，这次算是被 Bits 一锅端了。
本文数据核对于 2026 年 11 月 6 日，来源为三个官网首页与对应 GitHub 仓库；Star 数为查询当时的显示值，会持续变化。
浙公网安备 33010602011771号