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