Day 01 - Animate UI 介紹與特色

Animate UI? 這什麼？沒聽過欸

#

TLDR: 透過 Animate UI 元件，讓網頁元件動起來～

Animate UI 受到 Shadcn/ui 和 Magic UI 的啟發，提供 React 開發者易於整合和擴展的元件。它以 Tailwind CSS 和 Motion 為基礎打造，並且非常方便整合 Shadcn/ui、Radix UI、Base UI 與 Headless UI 框架。

並且在想要使用的地方，透過 CLI 或直接複製程式碼到專案中，即可使用。

Animate UI 核心特色

#

1. 開放原始碼：讓開發者可以自行修改每個元件的核心程式碼，可作彈性的運用，甚至修改成自己風格的程式碼。
2. 專為 shadcn/ui 和 Magic UI 完美搭配，提升每個組件的互動與順暢感
3. 內建多種動畫效果。除了 UI 元件動畫之外，還包含文字特效、背景動畫等效果（如打字效果、漸層背景、煙火背景等）
4. 採用 MIT 條款，允許任何目的的使用，包括商業用途。

如何安裝 Animate UI

#

本篇文章主要以 shadcn/ui CLI 作為操作，並且使用 Next.JS 為 Web 開發框架。亦可使用 Vite、Laravel、React Router、Remix、Astro、TanStack Start、TanStack Router 等套件。

其他框架安裝步驟請參考：Shadcn/ui Installation

1. 安裝 Node.JS，在系列教學中，我會使用 Node.js v24.7.0 (v25.1.0也是可以)，若想要用 Node.js v22.19.0 (LTS) 也是完全 OK der~

   在教學中，會使用 npx 安裝，若有需要使用 npm 進行也可以自行調整。詳細差異可參考：[NodeJS] npx 是什麼? 跟 npm 差在哪?

2. 建立專案，並且根據專案類型選擇專案形式。至於該選擇哪種專案，可以參考 Summer。桑莫。夏天 - 該用 Monorepo 嗎？比較 Monolith vs Multi-Repo vs Monorepo，這邊我以預設的 Next.js 為例。

   npx shadcn@latest init
   

   

3. 設定專案名稱，這邊我設定為 day1

4. 設定主色調，詳細顏色可以參考 Shadcn/ui Colors

   

5. 看到 Success 就代表完成拉！

6. 接著將終端機切換到專案根目錄中，並執行 npm run dev

   cd day1
   npm run dev
   

   

7. 打開瀏覽器，輸入 http://localhost:3000 即可看到網站畫面

   

小結

#

今天的我們學會如何啟用專案，明天將會繼續介紹 Animate UI 編輯器設定 - MCP，讓我們在開發時可以更得心應手 🎉 。

Reference

#

• Shadcn/ui Docs
• Animate UI Docs