查核日期 2026-10-14。 以下資料取自各家官網首頁、安裝文件、授權頁與 GitHub 上的 LICENSE 檔。元件數量只引用官網或 README 自己寫的數字，標示為「官網標示」，沒有另外計算。價格會變動，本文不列價格，只附各家方案頁連結。這篇由 WebberUI 團隊撰寫，我們盡量只寫可查證的事實；如果發現資料過期，請以各家官網為準。
總表
| WebberUI | Aceternity UI | Magic UI | React Bits | |
|---|---|---|---|---|
| 安裝 | registry；npx webberui@latest add | registry CLI（@aceternity/*），或手動複製 | registry CLI（@magicui/*） | registry CLI（@react-bits/*）、jsrepo，或手動複製 |
| 授權 | WebberUI License，可取得原始碼，非開源 | Pro 項目適用 Aceternity License；免費元件見下文 | MIT | MIT + Commons Clause |
| 主要依賴 | motion、Tailwind CSS v4 | Motion、Tailwind CSS | Motion、Tailwind CSS | 依元件而異（GSAP、Motion、three.js、OGL 等） |
| 元件數量 | 533 個元件（399 個免費）、104 套模板 | 官網標示 200+ 元件、區塊與模板，其中免費元件 116+ | 官網標示 150+ 免費元件與特效 | README 標示 200+ |
| 付費方案 | 有，見 /zh-tw/pricing | 有，見 pricing | Magic UI Pro，見 pro.magicui.design | React Bits Pro，見 pro.reactbits.dev |
| 文件語言 | 繁體中文、英文 | 英文 | 英文 | 英文 |
| 中文在地化元件 | 26 個 | 無 | 無 | 無 |
四家都是「把原始碼複製進你的專案」的模式，安裝後元件在你的 components/ 底下，可以直接修改。差別主要在授權條款、依賴與內容方向。
Aceternity UI
- 網站： ui.aceternity.com
- 安裝： 元件頁提供 registry CLI 指令（
@aceternity/background-beams這類命名空間寫法），也可以切到 Manual 分頁手動複製。首頁說明區塊與整頁也用 CLI 安裝，並提供 MCP server 給 AI agent 使用。 - 技術： 首頁標示以 React、Tailwind CSS 與 Motion 建構。
- 數量： 首頁標示 200+ 個 production-ready 元件、區塊與模板；元件區標示 116+ 個免費。
- 授權： /licence 頁面描述的是 Aceternity UI Pro 項目適用的 Aceternity License：可用於自己或客戶的無限個最終產品、可修改，不得再散布原始檔、不得在市集販售或製作模板販售。我們在官網與定價頁 FAQ 沒有找到免費元件的授權原文，商業使用前建議向 Aceternity 確認。
- 付費： 定價頁 列有 Free、年費、終身與團隊方案。
適合： 以 hero 區塊與大型視覺特效為主的頁面，且專案已經使用 Motion；需要整頁區塊時可搭配 Pro。
Magic UI
- 網站： magicui.design
- 安裝： 先初始化專案，再用
@magicui/globe這類命名空間指令加入元件（安裝文件），npm、yarn、bun 也可以。 - 技術： 首頁列出 React、TypeScript、Tailwind CSS 與 Motion。
- 數量： 首頁標示 150+ 個免費且開源的動畫元件與特效。
- 授權： GitHub repo 為 MIT License。
- 付費： Magic UI Pro 提供區塊與模板，首頁標示 50+。
適合： 需要 MIT 授權的行銷頁微互動，或想要能在公開 repo 裡自由使用與再散布的元件。
React Bits
- 網站： reactbits.dev
- 安裝： registry CLI，例如
@react-bits/SplitText-TS-TW這類命名空間寫法，結尾決定版本：JS 或 TS、純 CSS 或 Tailwind（安裝文件）。README 另外提到 jsrepo，也可以從元件頁的 Code 分頁手動複製。 - 技術： 每個元件有 JS／TS 與 CSS／Tailwind 四種組合。依賴依元件而異，repo 的
package.json包含 GSAP、Motion、three.js、OGL、matter-js 等，安裝前看元件頁列出的依賴。 - 數量： README 標示 200+；GitHub 在查核當天顯示約 49.1k stars。
- 授權： MIT + Commons Clause：可以用在任何商業用途的應用程式、網站或產品裡，但不得販售、再授權或再散布元件本身（單獨、打包或移植版本皆同）。
- 付費： React Bits Pro 是另外的付費產品，包含元件、頁面區塊、App UI 區塊與模板。
適合： 想找創意特效（背景、文字、3D、物理互動），或專案沒有用 TypeScript、沒有用 Tailwind，需要純 JS 或純 CSS 版本。
WebberUI
以下數字來自本站 llms-zh-tw.txt 的產生來源（lib/roadmap-data.json 與 lib/templates-data.json 中狀態為可用的項目）。
- 安裝：
npx webberui@latest add <name>安裝；免費元件也可以直接用npx webberui@latest add https://webberui.com/r/<name>.json。另有@webberui/mcp讓 AI agent 查詢與安裝元件。詳見 快速開始。 - 技術： React、Tailwind CSS v4。元件以
motion/react為基礎，CLI 安裝時會一併加入motion，另需要clsx與tailwind-merge（cn()工具）。 - 數量： 533 個元件，其中 399 個免費；104 套整頁模板，全部屬於 Pro。
- 授權： WebberUI License Agreement。用語是「可取得原始碼」，不是開源。可商用、可修改、可用在客戶案，交付給客戶的網站不算再散布；不得把元件原始碼公開散布（包括公開的 GitHub repo）。免費與 Pro 的使用權利相同，不需要標示出處。已安裝的元件不會連線回我們的伺服器，也沒有遠端停用機制。
- 語言： 文件與元件 demo 有繁體中文與英文兩套，英文版 registry 檔名為
<name>.en.json。 - 在地化元件： 中文在地化分類 有 26 個元件，例如 統一編號輸入（實作 2023 年起的檢查碼新制）、身分證字號輸入、民國日期選擇器、台灣地址選擇器、注音標註文字。
- 付費： Pro 元件與模板的方案見 /zh-tw/pricing。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add tax-id-input適合： 做台灣市場的網站與接案專案，需要繁中介面、在地表單驗證與整頁模板；或已經選用 Motion，希望元件寫法和自己的程式碼一致。
什麼情況不適合 WebberUI
- 需要 MIT 或其他開源授權。 WebberUI 不是開源，不能把元件原始碼放進公開 repo 或做成套件再散布。開源專案、要公開原始碼的作品集或教學 repo，Magic UI 的 MIT 授權比較合適。
- 只需要某一個特定特效。 如果你要的是某個社群熱門效果，而它只出現在 React Bits 或 Aceternity UI 的目錄裡，直接用那一家比較省事，不必為了一個效果換一套元件庫。
- 專案沒有用 Tailwind CSS 或 TypeScript。 WebberUI 元件以 TypeScript 與 Tailwind v4 撰寫，沒有純 CSS 或 JS 版本。React Bits 提供這些變體。
- 專案已經以 GSAP 或 three.js 為主。 WebberUI 以 Motion 為基礎，混用兩套動畫引擎控制同一個元素會互相覆蓋。React Bits 有部分元件以 GSAP、three.js 或 OGL 實作。
- 還在 Tailwind CSS v3。 WebberUI 的元件與主題變數以 v4 為準。
授權差異整理
四家用了三種不同的授權模型，這通常是選型時最需要先確認的一項：
- MIT（Magic UI）： 限制最少，可以再散布。
- MIT + Commons Clause（React Bits）： 可以商用，但不能販售或再散布元件本身。
- 專有授權（Aceternity UI Pro、WebberUI）： 可以用在最終產品與客戶案，不能散布原始碼。WebberUI 的免費元件也適用同一份授權。
公司有開源授權審查流程時，後兩類通常需要法務另外確認。
怎麼選
- 要 MIT、要能公開原始碼：Magic UI。
- 要創意特效、要 JS 或純 CSS 版本：React Bits。
- 要 hero 區塊與大型視覺特效：Aceternity UI。
- 要繁中文件、台灣在地表單、整頁模板，且使用 Motion 與 Tailwind v4：WebberUI。
多家並用也可行，四家都是複製原始碼的模式。要注意的是 components/ui/ 裡的同名檔案，以及每個元件各自適用的授權。要進一步了解底層的動畫引擎，可以看 2026 React 動畫套件怎麼選。