shadcn/ui 是一套设计精美、易于使用的组件和一个代码分发平台。它与您喜爱的框架和 AI 模型兼容。开源,代码开放。

这并非组件库,而是构建组件库的方法。

你知道大多数传统组件库的工作原理:从 NPM 安装一个包,导入组件,然后在你的应用程序中使用它们。

这种方法在需要定制组件以适应设计系统或需要使用库中未包含的组件时效果很好。通常,你最终会不得不封装库组件、编写变通方法来覆盖样式,或者混用来自不同库且 API 不兼容的组件。

这就是 shadcn/ui 旨在解决的问题。它基于以下原则构建:

  • 开放代码:组件代码的顶层是可以修改的。

  • 组合:每个组件都使用通用的、可组合的接口,使其具有可预测性。

  • 分发:平面文件模式和命令行工具使组件分发变得容易。

  • 精美默认样式:精心挑选的默认样式,让您开箱即用,获得出色的设计效果。

  • AI就绪:开放代码,供LLM阅读、理解和改进。

开放代码

shadcn/ui 会直接提供组件代码。您可以完全控制组件的自定义和扩展,以满足您的需求。这意味着:

  • 完全透明:您可以清楚地看到每个组件是如何构建的。

  • 轻松定制:修改组件的任何部分,以满足您的设计和功能要求。

  • AI 集成:通过访问代码,LLM 可以轻松阅读、理解甚至改进您的组件。

在一般的库中,如果需要改变按钮的行为,必须重写样式或重新包装组件。而使用 shadcn/ui,只需直接编辑按钮代码即可。