快速開始
從準備專案到看見第一個動畫元件，一步一步完成。
WebberUI 把 React 元件的原始碼直接安裝進你的專案，你可以自行修改樣式與行為。先用免費的 Split Text 完成一次安裝，不需要帳號或 Pro 授權。
1. 準備專案
需要 Node.js、npm，以及使用 React、Tailwind CSS v4 的專案。以下以 Next.js App Router 為例；其他 React 框架請先設定好 Tailwind CSS v4。
在終端機切換到有 package.json 的專案資料夾。若還沒有 components.json，先執行：
npx webberui@latest init已有 components.json 就跳到第 2 步，不必重新初始化。確認已設定 @/* 路徑別名，且 Tailwind 的全域 CSS 已載入。
2. 安裝第一個免費元件
在同一個專案資料夾執行。CLI 會加入元件原始碼及需要的套件，套用前請確認它列出的檔案變更。
npx webberui@latest add split-text預設元件位於 components/ui/split-text.tsx；若使用 src 目錄，則是 src/components/ui/split-text.tsx。實際位置依 components.json 的 aliases 設定。
3. 放進頁面
將以下內容放入 app/page.tsx（使用 src 目錄時為 src/app/page.tsx）。既有專案請把元件加入要展示的頁面，保留原本內容。
import { SplitText } from "@/components/ui/split-text";
export default function Page() {
return (
<main className="flex min-h-screen items-center justify-center p-8">
<SplitText text="Hello, WebberUI." className="text-4xl font-bold" />
</main>
);
}npm run dev開啟終端機顯示的本機網址。看到 Hello, WebberUI. 就完成了！一般情況下文字會逐字進場；系統開啟「減少動態效果」時會顯示靜態文字，這是正常行為。
遇到問題
| 狀況 | 處理方式 |
|---|---|
找不到 @/components/ui/split-text | 確認安裝成功，再比對 components.json 的 aliases 與實際檔案位置；import 路徑需跟著你的設定。 |
找不到 @/lib/utils 或 motion/react | 回專案根目錄重新執行元件安裝指令，確認依賴安裝成功；手動安裝請看 Split Text 文件。 |
| 樣式沒有出現 | 確認 Tailwind v4 的全域 CSS 已被根 layout 引入，重新啟動開發伺服器。 |
| Pro 安裝出現 401／403 | 先登入有使用權限的帳號，回元件頁重新按「複製安裝指令」；授權指令會到期，不要把它分享或提交到 Git。 |
| 文字出現但沒有動畫 | 檢查系統的減少動態效果設定；它不影響安裝是否成功。 |
下一步
進階：設定較短的 namespace 指令
將以下 registries 合併到既有 components.json，保留其他欄位：
{
"registries": {
"@webberui": "https://webberui.com/r/{name}.json"
}
}接著可用 npx webberui@latest add @webberui/split-text 安裝免費元件。Pro 元件仍需依授權安裝流程操作。