React UI Playground

元件

shadcn/ui ／ MUI ／ Mantine

推薦

shadcn/ui

和 Tailwind CSS 非常契合，是目前最受歡迎的選擇。程式碼看得到，遇到問題可以自己修改

比較效果

用每個函式庫做了同樣的東西，動手試試看。

shadcn/ui

MUI

Mantine

比較程式碼

修改程式碼，右邊的預覽會跟著變化。

在你自己的專案裡執行這個範例：npx shadcn@latest add button

import { Button } from "./components/ui/button"

export default function App() {
  return (
    <div className="flex flex-wrap gap-3 p-4">
      <Button>儲存</Button>
      <Button variant="outline">取消</Button>
      <Button variant="ghost">了解更多</Button>
    </div>
  )
}

比較

截至 2026 年 9 月

shadcn/ui

推薦官方網站 ↗

特色

把元件的程式碼複製到自己的專案裡使用，裡面的內容可以隨意修改

適用情境

想自由調整外觀。正在使用 Tailwind CSS

MUI

官方網站 ↗

特色

Google 風格（Material Design）的元件，一開始就一應俱全

適用情境

想快速做出管理後台之類的畫面，不用煩惱設計

Mantine

官方網站 ↗

特色

除了元件之外，還有很多好用的 Hook（例如 useDisclosure）

適用情境

想使用很多功能，不想自己寫 CSS