TLDR: 透過 Animate UI 元件,讓網頁動起來~
Animate UI 受到 Shadcn/ui 和 Magic UI 的啟發,提供 React 開發者易於整合和擴展的元件。它以 Tailwind CSS 和 Motion 為基礎打造,並且非常方便整合 Shadcn/ui、Radix UI、Base UI 與 Headless UI 框架。
並且在想要使用的地方,透過 CLI 或直接複製程式碼到專案中,即可使用。
本篇文章主要以 shadcn/ui CLI 作為操作,並且使用 Next.JS 為 Web 開發框架。亦可使用
Vite、Laravel、React Router、Remix、Astro、TanStack Start、TanStack Router 等套件。其他框架安裝步驟請參考:Shadcn/ui Installation
安裝 Node.JS,在系列教學,我會使用 Node.js v24.7.0
,若想要用 Node.js v22.19.0 (LTS)
也是完全 OK der~
在教學中,會使用 npx 安裝,若有需要使用 npm 進行也可以自行調整。詳細差異可參考:[NodeJS] npx 是什麼? 跟 npm 差在哪?
建立專案,並且根據專案類型選擇專案形式。至於該選擇哪種專案,可以參考 Summer。桑莫。夏天 - 該用 Monorepo 嗎?比較 Monolith vs Multi-Repo vs Monorepo,這邊我以預設的 Next.js 為例。
npx shadcn@latest init
設定專案名稱,這邊我設定為 day1
設定主色調,詳細顏色可以參考 Shadcn/ui Colors
看到 Success 就代表完成拉!
接著將終端機切換到專案根目錄中,並執行 npm run dev
cd day1
npm run dev
打開瀏覽器,輸入 http://localhost:3000
即可看到網站畫面
今天的我們學會如何啟用專案,明天將會繼續介紹 Animate UI 編輯器設定 - MCP,讓我們在開發時可以更得心應手 🎉 。
非常感謝版主分享 Animate UI 的詳細介紹!看到開頭的「Animate UI? 這什麼?」真的很有共鳴,沒想到現在有這麼方便又彈性的開源工具,能讓網頁的互動和動畫效果實作變得如此輕鬆。
文章中對於 Animate UI 受到 Shadcn/ui 和 Magic UI 啟發的說明,以及其核心特色,例如開放原始碼、內建多種 UI 元件動畫、文字特效和背景動畫,還有 MIT 授權等,都讓人印象深刻。特別是透過 CLI 快速整合 Shadcn/ui 的安裝教學,步驟清晰易懂,對於想快速上手的開發者來說非常有幫助。
我很期待版主明天繼續分享 Animate UI 編輯器設定 MCP 的內容,感覺這會讓開發流程更順暢、更得心應手!
也歡迎版主有空參考我的系列文「南桃AI重生記」:
https://ithelp.ithome.com.tw/users/20046160/ironman/8311