快速开始

    这不是一个传统组件库。它是你构建自己组件库的方式。

    你知道大多数传统组件库是如何工作的：从 NPM 安装一个包，导入组件，然后在应用中使用它们。

    这种方式在你需要定制组件以适应你的设计系统，或者需要库中没有包含的组件时，就会遇到问题。你最终不得不包装库组件、编写覆盖样式的工作代码，或者混合使用来自不同库的 API 不兼容的组件。

    这就是 Codebase Kit 要解决的问题。它基于以下原则构建：

    • 开放代码： 组件的顶层代码开放，可修改。
    • 可组合性： 每个组件使用通用、可组合的接口，使它们可预测。
    • 易于分发： 扁平文件模式和命令行工具使组件分发变得简单。
    • 精致默认： 精心选择的默认样式，开箱即用即可获得出色设计。
    • 面向 AI： 开放代码供 LLMs 读取、理解和改进。

    安装

    1. 初始化配置

    运行以下命令在你的项目中创建 components.json 配置文件：

    npm
    yarn
    pnpm
    bun
    deno
    npm shadcn@latest init

    这将引导你完成配置过程，包括：

    • 选择样式风格
    • 配置路径别名
    • 设置 TypeScript 选项
    提示

    详细了解 components.json 的所有配置选项，请参阅 components.json 配置 文档。

    2. 安装组件

    配置完成后，你可以使用 CLI 安装组件：

    # 安装单个组件
npx shadcn@latest add https://codebase.anyask.dev/r/button.json

# 安装多个组件
npx shadcn@latest add @xuanyuan/search-form @xuanyuan/descriptions

    开放代码

    Codebase Kit 为你提供实际的组件代码。你拥有完全的控制权来定制和扩展组件以满足你的需求。这意味着：

    • 完全透明： 你可以精确地看到每个组件是如何构建的。
    • 轻松定制： 修改组件的任何部分以适应你的设计和功能要求。
    • AI 集成： 访问代码使 LLMs 能够直接读取、理解甚至改进你的组件。

    在典型的库中，如果你需要更改按钮的行为，你必须覆盖样式或包装组件。使用 Codebase Kit，你只需直接编辑按钮代码。

    可组合性

    Codebase Kit 中的每个组件都共享一个通用的、可组合的接口。如果某个组件不存在，我们会引入它，使其可组合，并调整其样式以匹配并与设计系统的其余部分一起工作。

    共享的可组合接口意味着它对你的团队和 LLMs 都是可预测的。你不会为每个新组件学习不同的 API。即使是第三方组件也是如此。

    易于分发

    Codebase Kit 也是一个代码分发系统。它定义了组件的模式和用于分发它们的 CLI。

    • 模式： 定义组件、其依赖项和属性的扁平文件结构。
    • CLI： 用于跨项目分发和安装组件的命令行工具，支持跨框架。

    你可以使用该模式将组件分发到其他项目，或者让 AI 基于现有模式生成全新的组件。

    精致默认

    Codebase Kit 提供了大量具有精心选择的默认样式的组件。它们的设计本身就很好看，并且作为一个一致的系统协同工作：

    • 开箱即用： 无需额外工作，你的 UI 就拥有简洁的外观。
    • 统一设计： 组件自然地相互配合。每个组件都是为了与其他组件匹配而构建的，保持 UI 的一致性。
    • 易于定制： 如果你想改变什么，覆盖和扩展默认值很简单。

    面向 AI

    Codebase Kit 的设计使 AI 工具能够轻松地与你的代码协作。其开放代码和一致的 API 允许 AI 模型读取、理解甚至生成新组件。

    AI 模型可以学习你的组件如何工作，并提出改进建议，甚至创建与你现有设计集成的新组件。