---

前言

shadcn/ui 是一個由社區維護的現代 UI 組件庫模板集合，專為 React + Tailwind CSS 生態設計，主打：

• ? 可完全控制樣式 &行為（不像 MUI、AntD 那樣封閉）
• 🎯 基于 Radix UI（可訪問性強）
• 🧩 可選的組件拼裝，不強綁設計系統
• ?? 支持 Server Component、SSR、RSC 等現代特性

---

? 核心特點

特性	說明
? 美觀現代	默認采用干凈、優雅的設計（類似 Vercel / Linear）
🎨 Tailwind 驅動	100% Tailwind CSS 控制樣式，自由修改
?? Radix UI 底層	提供無障礙可訪問性支持（A11y）
🧱 可組合	所有組件是“導入代碼”的方式，無 run-time 限制
🔧 可維護性強	你擁有組件代碼本體（不再受限組件黑箱）

---

📦 支持組件（常用）

分類	組件
表單	Input, Textarea, Select, Switch, Checkbox, Form
彈窗	Dialog, Popover, Tooltip, AlertDialog, Sheet
導航	Tabs, Accordion, DropdownMenu, NavigationMenu
其他	Toast, Badge, Card, Avatar, Skeleton, Progress

---

🚀 安裝使用（框架支持）

支持 Vite、Next.js、Remix 等現代 React 框架。

初始化（Next.js 項目為例）

npx shadcn-ui@latest init

你會被提示：

• 是否使用 TypeScript
• UI 目錄位置（如 components/ui）
• Tailwind 配置路徑
• 是否安裝組件（如 Button, Dialog）

---

添加一個組件

npx shadcn-ui@latest add button

生成的文件：

components/ui/button.tsx

你可以自由修改樣式類或行為。

---

🧠 對比其他組件庫

特性	shadcn/ui	MUI	Ant Design	Chakra UI
樣式控制	? 完全控制	? 封閉	? 封閉	?? 類似
設計系統	?? 提供默認樣式	? 有	? 有	? 有
SSR 支持	? 優秀	?? 需調整	?? 有限	?? 有限
適合 Tailwind	? 最佳搭配	? 不兼容	? 不兼容	? 有沖突

---

📘 官方資源

• 官網：https://ui.shadcn.com
• GitHub：https://github.com/shadcn-ui/ui
• Demo 示例：https://ui.shadcn.com/docs/components/slider

---

? 總結

適合你嗎？	條件
? 喜歡 Tailwind	強烈推薦
? 需要 SSR / RSC 兼容	推薦
? 想要樣式可控且干凈 UI	推薦
? 想要“開箱即用 + Theme切換 + 組件黑盒”	不太適合

---

下面是一個基于 shadcn/ui、React 和 Tailwind CSS 封裝的 AI 聊天界面模板，具備如下特性：

? 功能特性：

• 支持聊天消息滾動顯示
• 用戶輸入框 + 發送按鈕
• 顯示用戶消息和 AI 消息
• 使用 shadcn/ui 組件：Input, Button, Card, ScrollArea, Skeleton
• Tailwind 風格美觀整潔

---

📦 依賴項（需先安裝）

npx shadcn-ui@latest init
npx shadcn-ui@latest add button input card scroll-area

---

🧱 頁面代碼：ChatPage.tsx

import { useState, useRef, useEffect } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Card, CardContent } from "@/components/ui/card"interface Message {role: "user" | "assistant"content: string
}export default function ChatPage() {const [messages, setMessages] = useState<Message[]>([])const [input, setInput] = useState("")const scrollRef = useRef<HTMLDivElement>(null)const handleSend = async () => {if (!input.trim()) returnconst userMsg: Message = { role: "user", content: input }setMessages((prev) => [...prev, userMsg])setInput("")// 模擬 AI 回復setTimeout(() => {const aiMsg: Message = {role: "assistant",content: `你說的是：“${userMsg.content}”`}setMessages((prev) => [...prev, aiMsg])}, 1000)}useEffect(() => {scrollRef.current?.scrollIntoView({ behavior: "smooth" })}, [messages])return (<div className="flex flex-col h-screen p-4 max-w-2xl mx-auto"><h2 className="text-2xl font-bold mb-4">AI Chat Assistant</h2><ScrollArea className="flex-1 border rounded-lg p-4 space-y-2 bg-muted">{messages.map((msg, index) => (<Card key={index} className={msg.role === "user" ? "ml-auto bg-white" : "mr-auto bg-gray-100"}><CardContent className="p-3 text-sm whitespace-pre-wrap"><strong>{msg.role === "user" ? "You" : "AI"}:</strong> {msg.content}</CardContent></Card>))}<div ref={scrollRef} /></ScrollArea><div className="mt-4 flex gap-2"><Inputplaceholder="Ask something..."value={input}onChange={(e) => setInput(e.target.value)}onKeyDown={(e) => e.key === "Enter" && handleSend()}/><Button onClick={handleSend}>Send</Button></div></div>)
}

---

🎨 可選樣式增強（全局 CSS）

body {@apply bg-background text-foreground;
}

---

🧪 進一步可添加功能

功能	shadcn 組件建議
Markdown 渲染	react-markdown 自定義卡片內容
Skeleton 骨架	Skeleton 組件用于 AI 回復加載中
多輪對話滾動	ScrollArea + useRef 自動滾動到底部
AI 流式回復	用 useEffect 模擬逐字加載即可

---