无需安装即可对比四款 React 后台管理模板

你开了八个标签页，手上有四个候选项目。每一个的成本都一样：克隆、安装、启动开发服务器、点两分钟、删掉文件夹。一个模板算下来四十分钟。等你弄完第三个，第一个的侧边栏长什么样你已经忘了。

贵的部分不是安装。而是你永远没法把它们摆在一起看。你拿眼前这个模板，去跟你记忆里周二看的那个比，而你对一个 UI 的记忆基本就是仪表盘页面，因为仪表盘页面就是 README 里那张截图。

四个链接，四个标签页，什么都不用装：

每个阵营一个：antd、MUI、Mantine 和 shadcn——后者根本不是组件库，它是你复制进自己仓库的源码。

文件来自同一个 commit，在你的浏览器里读进一份沙盒副本。什么都不会落到你的磁盘上。（如果你想要的那个不在这个列表里，你可以粘贴任意 GitHub 仓库进去——我上周写过这个，文末有链接。）

设置就这么点。剩下的才是没人写下来的部分：到底该看什么。

四项检查。每一项都是你要做的动作，不是一个形容词。

每个 admin 模板的仪表盘都好看。那是作者精修过的页面，也是每篇对比文章里都会放的那一页，包括那些带截图的。

所以去打开没人截图的页面：设置、基础资料、空状态、带校验的表单。你就是在这些地方看出，作者在 demo 之后还有没有继续做下去。

地址在项目名之后还能继续往下走，所以你可以直接落到某个文件上：

https://studio.crossui.com/app/sandbox/ant-design-pro/src/pages/profile/basic/index.tsx https://studio.crossui.com/app/sandbox/shadcn-admin/src/features/settings/account/account-form.tsx https://studio.crossui.com/app/sandbox/mantine-admin/src/app/(dashboard)/dashboard/settings/page.tsx

打开这三个，你就已经知道了一些 README 没告诉你的事。

在仪表盘上随便挑一张卡片。Ctrl-点击钻进去，再钻进它由什么构成。

你在回答一个问题：我要改这个，得打开几个文件？一张卡片如果是三个小组件，那就是三个文件。一张卡片如果是三百行内联写死，那就是一个文件，而每一次改动都是等着你团队里第二个人来撞的合并冲突。

两个答案都没错。它们是不同的赌注，而你是那个得住在文件里的人。

这是我知道的最快的架构检查，也是这四个差别最大的地方。

四种都合理的设计。但“改品牌色”在每一个里都是不一样的下午，而这种事你想在投入之前就知道，不是之后。

ant-design-pro 17 个依赖 material-dashboard-react 18 mantine-admin 25 shadcn-admin 43

然后看看这些数字由什么构成，因为光看数量会骗人。shadcn-admin 那四十三个里有十八个是 @radix-ui/——每个 primitive 一个包，这个模型就是这么运作的：组件源码归你，你依赖的是底下那个无样式的行为。mantine-admin 那二十五个里有七个是 @mantine/。ant-design-pro 的十七个主要是 @ant-design/* 和 antd 本身，也就是一个大库只算了一次。

所以：一个重依赖，还是二十个小依赖。再说一次，这不是排名——但如果你们公司对新包有审批流程，这两个数字意味着非常不同的文书量。

既然在那儿了，看看整个文件树。这四个分别是 311、316、107 和 257 个文件。107 那个是 Mantine。如果“小到一下午能读完”对你重要，那这是一个实打实的差别，而没人把它放进对比表里。

把 owner 和仓库名粘贴进 Community Templates，你就会得到一个同样形状的链接。公开仓库不需要账号，你的或别人的都不需要。

这就是你拿同事一直推荐的那个模板跑这四项检查的方法。

这四个是我们配置好的。React 版本、路径别名、哪个 CDN 提供什么、这里那里加个 shim。你粘贴进去的仓库这些一概没有。它可能什么都不用做就能打开，也可能打不开——这四个和任意仓库之间的差别是真实存在的，而且是我们做的，不是模板的功劳。

我宁愿你现在就知道，而不是在你带来的第一个仓库上才发现，然后断定这工具不靠谱。

不是每个仓库都能渲染。有些打开是空白，有些打开是一张错误卡片，写着它停在了哪个文件哪一行。常见原因都很无聊且具体：一个只发 CommonJS 的包、一个 Create React App 项目对图片调 require()、一个和周围代码不是同一代的路由器。Community Templates 页面底部的说明列出了目前能通过的有哪些。

我不会告诉你这四个里哪个最好。我们把它们全展示出来，所以我们是那个你最不该采纳其排名的人。

我要说的是，排名从来都不是难的部分。你已经知道你的团队是写 Tailwind 还是引入组件库。难的是那件你以前没法低成本做到的事：在十分钟内，在任何人敲下 npm install 之前，在四个标签页里看到四个候选的设置页。

先看。安装那个经得起看的。

关于 CrossUI Studio——一个真正对称的 React 应用可视化编辑器。它完全在浏览器里运行，零构建步骤，同时一个智能依赖图会即时映射你的代码库。可视化地跨物理文件钻取组件——钻进一个 .map、一个三元表达式，或一个嵌套插槽。SCD 引擎通过原子 AST 补丁让代码和画布保持同步——动一个 prop，就只有那个 prop 动。你的 git diff 读起来完全就像是你自己写的：注释、格式和意图都保留。不分叉。不锁定。