為什麼選擇 HeroUI？
HeroUI（前身為 NextUI）是一個可用於生產環境的 React 元件庫，它將 React Aria 的嚴謹無障礙設計與 Tailwind CSS v4 的實用優先樣式相結合。它提供了簡潔的複合元件 API（Card.Header、 Card.Content、 Select.Item 等），無需 <Provider> 包裹器，並且可直接搭配 React 19 和 Next.js 使用。
預設無障礙 — 基於 React Aria，符合 WCAG 標準的鍵盤、焦點和螢幕閱讀器行為
Tailwind CSS v4 — 現代化引擎，無 CSS-in-JS 執行階段，更小的產出，更快的建置
複合元件 — 可組合的 API（
Card.Header、Card.Content）取代深層嵌套的 props零樣板程式碼 — 無需 Provider 包裹器（不同於 Chakra、MUI）
AI 原生 — MCP 伺服器、
llms.txt和代理技能，讓 AI 助理理解你的元件經過實戰考驗 — 前身為 NextUI，已獲得數千個生產應用程式的信賴
快速開始
請造訪 heroui.com/docs/react/getting-started/quick-start 以開始使用 HeroUI。
npm install @heroui/react適用對象
如果你正在建置以下專案，HeroUI 將是絕佳選擇：
SaaS 應用程式 — 內建表單、表格、覆蓋層和通知
儀表板與管理後台 — 資料密集的佈局搭配一致的設計 Token
電子商務店面 — 高效能、無障礙、SEO 友善的元件
行銷網站與登陸頁面 — 精美的 UI，無需沉重的執行階段
任何 React / Next.js 專案 — 重視設計品質與無障礙性的專案
AI 驅動開發
HeroUI 專為 AI 輔助開發工作流程而設計。
工具 | 功能說明 |
|---|---|
MCP 伺服器 （ | 元件可理解你的主題 — 在 Cursor、Claude Code、Windsurf 或任何支援 MCP 的編輯器中安裝此伺服器 |
llms.txt | 位於 heroui.com/llms.txt — 為 LLM 提供每個元件的結構化上下文 |
代理技能 | 執行 |
可與 Cursor、 Claude Code、 Windsurf、 GitHub Copilot 以及任何支援 MCP 或 llms.txt 的工具搭配使用。
比較
函式庫 | HeroUI 的不同之處 |
|---|---|
shadcn/ui | HeroUI 提供一體化的設計系統，無需額外設定；shadcn 則是複製貼上後自行客製化 |
MUI | HeroUI 更輕量、原生使用 Tailwind，無 CSS-in-JS 執行階段開銷 |
Chakra UI | HeroUI 使用 React Aria（更強大的無障礙基礎）和 Tailwind v4（更佳效能） |
Mantine | HeroUI 具備 AI 工具（MCP、llms.txt），並以 Tailwind 為優先的樣式方案 |
