Clarity：VMware 企业级设计系统与组件库

Clarity 是 VMware 发起、现由 Broadcom 维护的企业级设计系统，不止给组件，还配了一整套 UX 规范和无障碍标准。它同时提供 Angular 组件与 Web Components 两种版本，所以不一定非要绑 Angular。

它解决什么问题

企业应用信息密度高，组件库如果只堆控件、不谈设计规范，做出来的界面容易乱。

很多设计系统绑死某个框架，团队技术栈一换就全部推倒重来，沉没成本高。

核心能力

规模小但规范完整

Clarity 的组件数量不算多，生态规模也比不上 PrimeNG、NG-ZORRO，遇到问题能搜到的现成资料相对少。

但它真正的价值在设计规范：如果你的团队缺一套统一的企业 UX 标准，Clarity 的文档本身就是现成的参考。要不要选它，取决于你更看重「组件多」还是「规范全」。

同类工具怎么选

谁适合用

• 需要统一 UX 规范、而不只是组件堆砌的企业团队
• 技术栈可能切换、希望组件能脱离 Angular 复用的项目
• 做信息密度高的数据类后台、重视无障碍合规

怎么开始

1. Angular 项目用 ng add @clr/angular 安装，Web Components 版另引 @cds/core。
2. 在模块引入 ClarityModule，按文档用 clr- 前缀组件。
3. 数据网格用 clr-datagrid，配置筛选、排序与分页。
4. 查阅官网 UX 指南，把设计规范落到自己的界面里。
5. Web Components 版在非 Angular 框架里直接当自定义元素使用。

常见问题

一定要用 Angular 吗？
不。Clarity 有 Web Components 版本，React、Vue 或纯 HTML 都能用，只是 Angular 版集成更顺。

组件够做完整后台吗？
常用后台组件齐全，但总数比 PrimeNG 少，特殊组件可能要自研或补第三方。

还活跃吗？
现由 Broadcom 维护，迭代节奏不如社区库快，但作为设计系统仍可用。

授权与合规

Clarity 由 Broadcom 以 MIT 协议维护开源，可用于商业与闭源项目，无付费门槛；使用时不强制署名，但应保留源码中的版权声明。 官网：clarity.design。