Shadcn UI vs MUI，二者之间孰优孰劣？

2024年已经来临，React组件库的生态依然十分繁荣，本文会通过几个角度来拆解一下两个时下流行的组件库，通过客观的分析针对不同的角度来让使用者选择的时候更加的客观。

我们为什么要选择组件库？

一般来说每家公司在构建Web网站的时候都会选择一个组件库，组件库解决了大量的重复性工作，有非常好的开箱即用的组件，比如Select，Input，CheckBox等。这些组件通过自定义样式或者通过自带的美观的样式，可以使用他们快速制作精美的网站，而不需要从零开始构建大量的基础功能。

所以总结一下我们一般在两个场景使用组件库：

• 外部工具：直接面向公司的用户，通常有公司自己的风格，更加美观和可响应。
• 内部工具：面向公司内部的员工使用，设计美观即可，更加注重功能的快速实现。

下面我们会根据几个下面几个点来分析两个组件库

1. 设计
2. 能力丰富度
3. 不同场景下如何选择

内部工具场景的其他选择

ILLA Cloud是一个开箱即用的低代码工具，使用ILLA可以无需新建任何项目，使用简单的JS即可快速构建内部工具

• Web & App Admin Panel
• Data Dashboard
• Customized B2B Tools

相对于使用组件库构建的场景下，使用ILLA Cloud可以10x速度构建上述工具，并且ILLA Cloud支持多人协作，可以团队内部多人协同编辑。

Shadcn UI的特点

Shadcn的一些详细数据

• ⭐ Github Star：37k
• ⏬ NPM Download: 每周23,962次下载
• 💪🏼 First Release Date：Mar 8, 2023

Shadcn UI是一个新诞生的项目，一经出现即在不到一年的时间里面获得了37k Star的好成绩，看来优秀的开源项目非常容易获得大家的认可。

设计

设计风格上Shadcn UI更加偏向商务风格，简洁的UI，非常适合内部工具的场景和一些严肃的应用类场景，Shadcn UI也支持自定义主题，不过看上去只有

• 颜色
• 圆角
• 暗色模式 / 亮色模式
• 预制的“默认风格”和“纽约风格”

对于细节的把握，比如字体和字号等是没有的，看上去在设计方面可控性相对来说只能满足基础的需求，不过对于内部工具场景是非常足够的，但是对于外部工具场景就有点捉襟见肘了。

在CSS上也同时支持了css和css-in-js方案，css-in-js方案使用的Stitches，css默认支持传统css，如果要使用less和sass可能需要二次配置，不能开箱即用

丰富度

组件的丰富度上是完全可以满足日常的开发需求，大多数的能力均支持并且有完整的回调，是一个比较完善的组件库。一些比较重要的能力Shadcn UI均支持

包括不限于

• SSR
• Accessibility
• Animation

不过对于更加深入的需求比如超级丰富的图表和高性能的表格看上去是不支持的，相信随着项目的不断发展，项目方会持续不断的迭代。

MUI的特点

MUI的一些详细数据

• ⭐ Github Star：90k
• ⏬ NPM Download: 每周3,263,852次下载
• 💪🏼 First Release Date：Nov 6, 2014

MUI作为一个老牌项目，从2014年维护至今，已经有将近10年的年龄，相信从稳定性的角度，肯定是开源项目里面的翘楚。并且超高的Star数和每周下载量可以保证社区是持续不断活跃的状态

设计

设计风格上，MUI严格遵守了Google大名鼎鼎的Material Design设计风格。并且MUI支持的定制化能力非常丰富，可以满足对内对外的大部分场景，很多知名的开源项目也是使用MUI来构建前端页面的。对于大多数的功能，MUI基本上提供了最全面的支持。

除了常见的

• 颜色
• 圆角
• 暗色模式 / 亮色模式

之外。MUI支持完整的任何字体，字号，颜色，内外边距的各种配置，作为一个构建了10年的项目，可以说功能是非常强大了。

在CSS的支持上MUI支持了一套自定义的系统，整体的布局使用了emotionjs来进行样式的调节，这可能存在一定的学习成本，不能做到直接开发，有些时候对于部分样式的修改还是需要查阅文档，这可能对一些开发者不够友好。

丰富度

MUI的组件类型非常的复杂，把整体组件划分为了几个纬度。

分别是

• MUI Core：MUI的基础功能组件，包括大量的基础组件和样式系统
• MUI X：MUI的高性能组件和复杂组件，包括高性能表格，图表等

如果你在开发一个非常复杂的系统可以使用MUI的全家桶解决方案，不过MUI X是一个收费组件库，可能需要为此而花费一笔订阅的费用。

MUI是一个比较重型的仓库，代码量和维护时间极长，可定制性非常高，比较适合大型的项目来使用。在MUI的仓库里面你可以找到大量的功能。

我该如何选择

如果你是一个对新事物充满好奇心的开源极客，对于开发的产品不需要高度定制化的UI，并且不存在复杂的数据处理需求，推荐使用Shadcn UI来进行开发。更加轻量，配置更简单，但是功能不够强大，不过对于内部工具场景足够满足需求。

如果你需要一个组件库用来开发大型的复杂项目，需要复杂的图表和高性能数据组件，并且不想找更多的解决方案并且愿意为此付出一定的费用，你可以选择MUI来进行开发，强大的能力是你开发大中型项目的不二选择。