简介
shadcn/ui 是一套设计精美、易于访问的组件集,也是一个代码分发平台。它与您喜爱的框架和 AI 模型兼容。开源。开放代码。
这不是一个组件库。这是您构建自己组件库的方式。
您可能知道大多数传统组件库的工作方式:从 NPM 安装一个包,导入组件,然后在您的应用中使用它们。
这种方法很好用,直到您需要自定义组件以适应您的设计系统,或者需要一个库中未包含的组件。通常,您最终会包装库组件,编写变通方案来覆盖样式,或者混合使用来自不同库的、API 不兼容的组件。
这就是 shadcn/ui 旨在解决的问题。它围绕以下原则构建:
- 开放代码:您的组件代码的最上层是开放的,可供修改。
- 组合性:每个组件都使用一个通用、可组合的接口,这使得它们可预测。
- 分发:扁平文件模式和命令行工具使其易于分发组件。
- 精美默认值:精心选择的默认样式,让您开箱即用就能获得出色的设计。
- AI 就绪:开放代码,供 LLM(大型语言模型)阅读、理解和改进。
开放代码
shadcn/ui 为您提供实际的组件代码。您可以完全控制根据您的需求自定义和扩展组件。这意味着:
- 完全透明:您能清楚地看到每个组件是如何构建的。
- 易于定制:修改组件的任何部分以满足您的设计和功能要求。
- AI 集成:对代码的访问使得 LLM 能够轻松阅读、理解甚至改进您的组件。
在典型的库中,如果您需要更改按钮的行为,您必须覆盖样式或包装组件。使用 shadcn/ui,您可以直接编辑按钮代码。
组合性
shadcn/ui 中的每个组件都共享一个通用、可组合的接口。如果某个组件不存在,我们会将其引入,使其可组合,并调整其样式以匹配并与设计系统的其余部分协同工作。
共享、可组合的接口意味着它对您的团队和 LLM 来说都是可预测的。您无需为每个新组件学习不同的 API,甚至对于第三方组件也是如此。
分发
shadcn/ui 也是一个代码分发系统。它定义了组件的模式和用于分发它们的 CLI。
- 模式:一种扁平文件结构,定义了组件、它们的依赖项和属性。
- CLI:一个命令行工具,用于跨项目分发和安装组件,并支持跨框架。
您可以使用该模式将您的组件分发到其他项目,或者让 AI 根据现有模式生成全新的组件。
精美默认值
shadcn/ui 附带了大量精心选择默认样式的组件。它们旨在独立看起来美观,并作为一个一致的系统协同工作。
- 开箱即用:您的 UI 无需额外工作即可拥有简洁、极简的外观。
- 统一设计:组件自然地相互匹配。每个组件都构建为与其他组件相匹配,保持您的 UI 一致。
- 易于定制:如果您想更改某些内容,覆盖和扩展默认值非常简单。
AI 就绪
shadcn/ui 的设计使 AI 工具能够轻松地与您的代码协同工作。其开放代码和一致的 API 允许 AI 模型读取、理解甚至生成新的组件。
AI 模型可以学习您的组件如何工作,并提出改进建议,甚至创建与您现有设计集成的全新组件。