# Codebase Kit

## Guide

- [components.json 配置](/guide/components-json.md): components.json 文件用于配置你的项目，使 Codebase Kit 能够理解你的项目设置并生成定制化组件。 :::tip 注意
components.json 文件是可选的，仅在使用 CLI 添加组件时才需要。如果你使用复制粘贴的方式，则不需要此文件。
:::
- [快速开始](/guide/get-started.md): 这不是一个传统组件库。它是你构建自己组件库的方式。 你知道大多数传统组件库是如何工作的：从 NPM 安装一个包，导入组件，然后在应用中使用它们。 这种方式在你需要定制组件以适应你的设计系统，或者需要库中没有包含的组件时，就会遇到问题。你最终不得不包装库组件、编写覆盖样式的工作代码，或者混合使用来自不同库的 API 不兼容的组件。 这就是 Codebase Kit 要解决的问题。它基于以下原则构建： 开放代码： 组件的顶层代码开放，可修改。可组合性： 每个组件使用通用、可组合的接口，使它们可预测。易于分发： 扁平文件模式和命令行工具使组件分发变得简单。精致默认： 精心选择的默认样式，开箱即用即可获得出色设计。面向 AI： 开放代码供 LLMs 读取、理解和改进。
- [Markdown & MDX](/guide/index.md): Rspress supports not only Markdown but also MDX, a powerful way to develop content.
- [LLMs.txt](/guide/llms.md)

## Components

- [AIFormFill AI 智能表单填写](/components/AIFormFill.md): AI 智能表单填写组件,可以自动分析表单字段并智能填写合适的测试数据。
- [AsyncDescriptions 异步描述列表](/components/AsyncDescriptions.md): 支持异步数据加载的描述列表组件，集成了 BoundaryBlock 的加载、错误、空状态处理。
- [AsyncSelect 异步选择器](/components/AsyncSelect.md): 支持异步数据加载和远程搜索的选择器组件。
- [BoundaryBlock 边界区块](/components/BoundaryBlock.md): 内容边界处理组件，用于处理加载中、空数据、错误等边界状态。
- [~~Button 按钮~~](/components/Button.md): <Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>
- [DescriptionItem 描述项](/components/DescriptionItem.md): 描述项配置类型，用于配置 Descriptions 组件的每一项。
- [Descriptions 描述列表](/components/Descriptions.md): 配置化的描述列表组件，通过 items 配置自动渲染数据。
- [DownloadManager 下载管理](/components/DownloadManager.md): 管理下载任务的组件，支持任务列表、下载状态追踪、下载进度提示等功能。
- [FilePreview 文件预览](/components/FilePreview.md): 文件预览组件，支持文件列表展示和下载。
- [FilePreviewList 文件预览列表](/components/FilePreviewList.md): 文件列表展示组件，支持点击下载。
- [HighlightText 文本高亮](/components/HighlightText.md): 对文本中的关键词进行高亮显示的组件。
- [Iframe 内嵌框架](/components/Iframe.md): 带有加载状态和错误处理的 iframe 组件。
- [Image 图片](/components/Image.md): 支持占位符的图片组件。
- [ImageGroup 图片组](/components/ImageGroup.md): 展示多张图片的组件，支持加载、错误、空状态处理。
- [MultiButtonAction 多按钮操作](/components/MultiButtonAction.md): 通用多按钮操作组件，当按钮数量超过指定数量时，超出部分收纳到下拉菜单中。
- [QuestionTooltip 提示文本](/components/QuestionTooltip.md): 带提示文本的组件，当有提示文本时在 children 后面显示问号图标。
- [SearchForm 搜索表单](/components/SearchForm.md): 响应式搜索表单组件，支持容器查询自适应布局、展开/收起功能。
- [UploadImage 图片上传](/components/UploadImage.md): 支持多张图片上传的组件。
- [UploadMultiFile 多文件上传](/components/UploadMultiFile.md): 支持多种文件类型上传的组件，可限制文件类型、数量和大小。
- [Overview](/components/index.md)

## Others

- [Hello world!](/hello.md)
- [Corner Shape Playground](/playground/corner-shape.md): 交互式体验 CSS border-radius 和 corner-shape 属性，探索 Superellipse 等高级圆角效果。 :::tip 提示
请使用 Chrome 139+ 或 Edge 139+ 浏览器查看最佳效果。Firefox 和 Safari 用户可能无法看到 Superellipse 效果。
:::
- [CSS Anchor 交互注释](/playground/css-anchor/annotations.md): 使用 CSS Anchor Positioning 创建产品功能标注和代码注释，让内容更具交互性。
- [CSS Anchor 下拉菜单](/playground/css-anchor/dropdown.md): 使用 CSS Anchor Positioning 实现精准定位的下拉菜单，支持子菜单与自动翻转。
- [CSS Anchor Positioning Playground](/playground/css-anchor/index.md): 交互式体验 CSS Anchor Positioning API,学习如何使用原生 CSS 实现精确的锚点定位效果,无需 JavaScript 计算。 :::tip 浏览器支持 Chrome 125+ · 完全支持Edge 125+ · 完全支持Safari 26.0+ · 完全支持Firefox 147+ · 完全支持Opera 111+ · 完全支持 此组件使用 CSS Anchor Positioning API。如使用不支持此功能的浏览器,部分效果可能无法正常显示。
:::
- [文本选择工具栏](/playground/css-anchor/text-selection.md): 使用 CSS Anchor Positioning 实现类似 Medium 的文本选择工具栏，选中文本时自动显示格式化选项。
- [](/playground/diffs.md)
- [Scroll Mask Playground](/playground/scroll-mask.md): 交互式体验 CSS scroll mask 效果，学习如何使用 animation-timeline 创建渐变遮罩效果。 :::tip 浏览器支持 Chrome 115+ · 完全支持Edge 115+ · 完全支持Safari · 实验性支持（需启用功能标志）Firefox · 暂不支持 此组件使用 CSS animation-timeline API 实现滚动驱动遮罩效果。如使用不支持此功能的浏览器，遮罩效果可能无法正常显示。
:::
- [Scroll State Playground](/playground/scroll-state.md): 交互式体验 CSS @container scroll-state() 查询,学习如何使用纯 CSS 实现基于滚动状态的动态样式切换。 :::tip 浏览器支持 Chrome 133+ · 完全支持Edge 133+ · 完全支持Safari · 暂不支持Firefox · 暂不支持 此组件使用 CSS @container scroll-state() 容器查询。如使用不支持此功能的浏览器,部分效果可能无法正常显示。
:::
- [Sibling Index Playground](/playground/sibling-index.md): 交互式体验 CSS sibling-index() 和 sibling-count() 函数,学习如何使用兄弟元素索引创建动态样式效果。 :::tip 浏览器支持 Chrome 138+ · 完全支持Edge 138+ · 完全支持Safari 26.2+ · 完全支持Firefox · 暂不支持 此组件使用 CSS sibling-index() 和 sibling-count() 函数。如使用不支持此功能的浏览器,部分效果可能无法正常显示。
:::
- [CSS to UnoCSS Playground](/playground/unocss.md): 这是一个 CSS 属性到 UnoCSS 类名的转换工具。输入普通的 CSS 属性，即可获得对应的 UnoCSS 工具类。
- [](/prompts.md)
- [](/quicklinks.md)
- [基础列表页](/template/basic-list.md): 标准的数据列表页面，包含多条件搜索、分页表格、操作按钮等功能
- [](/template/common-detail/code.md)
- [](/template/common-detail/demo.md)
- [通用详情页](/template/common-detail/index.md): 标准的详情展示页面，包含描述列表和操作区域
- [通用列表页](/template/common-list/index.md): 标准的数据列表页面，包含多条件搜索、分页表格、操作按钮等功能
- [](/template/drawer-detail/code.md)
- [](/template/drawer-detail/demo.md)
- [抽屉详情区块组件](/template/drawer-detail/index.md): 点击后在抽屉中展示详细信息
- [](/template/drawer-form/code.md)
- [](/template/drawer-form/demo.md)
- [抽屉表单组件](/template/drawer-form/index.md): 在抽屉中进行表单编辑的交互模式
- [](/template/drawer-list/code.md)
- [](/template/drawer-list/demo.md)
- [抽屉列表组件](/template/drawer-list/index.md): 点击列表项弹出抽屉显示详情的交互模式
- [](/template/drawer-step-form/code.md)
- [](/template/drawer-step-form/demo.md)
- [抽屉步骤表单组件](/template/drawer-step-form/index.md): 多步骤表单的抽屉交互模式，适用于复杂表单场景
- [模板库](/template/index.md): 开箱即用的业务模板，加速你的开发效率
- [](/template/tabs-list/code.md)
- [](/template/tabs-list/demo.md)
- [带 Tabs 的列表页](/template/tabs-list/index.md): 包含搜索区块和数据列表的页面，支持多标签切换
- [Color Tokens](/theme/color-palette.md): 品牌色和语义化颜色 Token 系统，提供完整的色彩规范，包含品牌色、中性色以及多种语义色。
- [Font Tokens](/theme/font-tokens.md): 字号 Token 系统，定义了不同层级的文字大小、行高和字重，提供清晰的信息层级和一致的视觉体验。
- [Functional Colors](/theme/functional-colors.md): 功能色 Token 系统，用于表达不同状态的语义化颜色，包括错误、警告和成功三种状态，每个状态包含 5 个色阶。
- [Overview](/theme/index.md)
- [Radius Tokens](/theme/radius-tokens.md): 圆角 Token 系统，定义了不同层级的圆角大小，为界面元素提供统一且柔和的视觉效果。
- [Shadow Tokens](/theme/shadows-tokens.md): 阴影 Token 系统，定义了不同层级的阴影效果，用于创建界面的深度感和层次感。
- [Shortcuts](/theme/shortcuts-tokens.md): UnoCSS Shortcuts 系统，提供常用样式组合的快捷类名，简化开发并保持样式一致性。 empty 空值占位符，用于数据为空时显示横线 布局类 用于快速实现常见布局结构的快捷类： flex-between 水平布局，两端对齐（flex + items-center + justify-between） flex-col-between 垂直布局，两端对齐（flex + flex-col + justify-between） 卡片类 统一的卡片容器样式，提供一致的视觉效果： card-default 默认卡片样式（圆角 + 白色背景 + 标准内边距） card-default-border 带边框的默认卡片样式 card-default-sm 小尺寸卡片样式（顶部内边距更小） form-card 表单卡片样式（底部边距为 1px）From.Item 默认会有 margin-bottom: 24px; 卡片头部类 卡片区域的细分样式： 完整的卡片头部示例 描述列表类 用于展示键值对信息的网格布局： 完整的描述列表示例 标签类 统一的标签样式系统： 基础标签 状态标签 其他工具类 bg-body 页面背景色（#f5f5f5） tabs-no-border 去除 Ant Design Tabs 组件导航栏底部的默认边框 pagination-bottom-0 去除 Ant Design Table 组件分页器的默认底部边距 export default defineConfig({
presets: [presetWind3()],
cli: {
entry: {
patterns: ['**/*.{tsx,mdx}'],
outFile: 'theme/uno.css',
},
},
rules: [
],
shortcuts: [
['empty', 'empty:before:content-["--"]'],
['flex-between', 'flex items-center justify-between'],
['flex-col-between', 'flex flex-col justify-between'],
['form-card', 'rounded bg-white px-6 pt-5 pb-1px'],
['card-default', 'rounded bg-white dark:bg-gray-6 px-6 py-5'],
['card-default-border', 'card-default border border-solid border-gray-3 dark:border-white-4'],
['card-default-sm', 'rounded bg-white dark:bg-gray-6 px-6 pt-4 pb-5'],
['card-header', 'flex-between pb-4'],
['card-header-title', 'text-base-m truncate'],
['card-header-extra', 'ml-4 flex-shrink-0 text-gray-6  cursor-pointer flex items-center gap-4'],
['descriptions-title', 'font-600 text-gray-8  mb-4'],
['descriptions', 'grid gap-x-6 gap-y-3 w-full grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 @xl:grid-cols-4'],
[
'descriptions-item',
'flex gap-3 [&>:first-child]:text-gray-6 [&>:first-child]: [&>:first-child]:text-nowrap ' +
'[&>:last-child]:flex-1 [&>:last-child]:min-w-0 [&>:last-child]:break-all',
],
['search-form-actions', 'col-start-auto flex-1 flex justify-end'],
['form-item-compact', '[&.ant-form-item-control-input]:min-h-22px [&.ant-form-item-no-colon]:h-22px'],
['tag-base', 'inline-block box-border rounded-xs border border-solid border-transparent'],
['tag-default', 'tag-base px-1 bg-gray-2 text-gray-7  dark:bg-white-4 dark:text-white text-xs'],
['tag-default-lg', 'tag-default py-1px px-2 text-sm'],
['bg-body', 'bg-[#f5f5f5] dark:bg-[#1a1a1a]'],
[
/^tag-(success|error|warning)(-lg)?$/,
([, status, size]) => {
const baseClass = size ? 'tag-default-lg' : 'tag-default';
const colorMap: Record<string, string> = {
success: 'border-success-1 dark:border-success bg-success-1 dark:bg-success text-success dark:text-success-1',
error: 'border-error-1 dark:border-error bg-error-1 dark:bg-error text-error dark:text-error-1',
warning: 'border-warning-1 dark:border-warning bg-warning-1 dark:bg-warning text-warning dark:text-warning-1',
};
return ${baseClass} ${colorMap[status]};
},
],
['tabs-no-border', '[&.ant-tabs-nav::before]:!border-none'],
['pagination-bottom-0', '[&.ant-pagination]:mb-0!'],
],
}); 标签状态
- [](/theme/shortcuts/bg-body.demo.md)
- [](/theme/shortcuts/card-default-border.demo.md)
- [](/theme/shortcuts/card-default-sm.demo.md)
- [](/theme/shortcuts/card-default.demo.md)
- [](/theme/shortcuts/card-header.demo.md)
- [](/theme/shortcuts/descriptions.demo.md)
- [](/theme/shortcuts/empty.demo.md)
- [](/theme/shortcuts/form-card.demo.md)
- [](/theme/shortcuts/layout-flex-between.demo.md)
- [](/theme/shortcuts/layout-flex-col-between.demo.md)
- [](/theme/shortcuts/pagination-bottom-0.demo.md)
- [](/theme/shortcuts/tabs-no-border.demo.md)
- [](/theme/shortcuts/tag-default.demo.md)
- [](/theme/shortcuts/tag-status.demo.md)
- [Common 常用工具](/utils/common.md): 通用工具函数集合。
- [Utils 工具函数](/utils/index.md)
- [Number 数字格式化](/utils/number.md): 提供一系列数字格式化工具函数，支持保留精度、千分位分隔、自动单位转换等功能。
- [Percent 百分比](/utils/percent.md): 提供百分比格式化和计算的工具函数。
- [React 工具](/utils/react.md): React 组件相关的工具函数。