Docs Kit 的每个组件都是一个纯 TypeScript 函数，返回 HTML 字符串；交互由 initCelestialUI() 在运行时通过 data-cpd-* 钩子接管。全部导出见 src/lib/ui/index.ts。

本分类每页记录一个组件：不同状态的实时预览、生成它们的构建器调用、 参数表与注意事项。

组件画廊

Callout 提示框

五种语义提示变体。

Cards 卡片

响应式链接卡片网格。

Steps 步骤

编号流程列表。

Tabs 标签页

带分组的标签面板。

Accordion 折叠

可折叠章节。

Files 文件树

文件树浏览器。

Breadcrumb 面包屑

页面祖先路径。

Pagination 分页

上一页 / 下一页卡片。

CodeBlock 代码块

带复制按钮的代码框。

Heading 标题

带锚点与复制链接的标题。

Badge 徽标

六种语义变体。

Kbd 按键

键盘按键小片。

Button 按钮

按钮，六种变体三种尺寸。

Link 链接

带箭头标记的文本链接。

Dropdown 下拉菜单

带分组与分隔线的菜单。

Drawer 抽屉

导航下方的滑入面板。

Modal 弹窗

带模糊遮罩的覆盖式弹窗。

运行时

initCelestialUI() 通过事件委托接管全部交互，DOM 就绪后调用一次即可：

import { initCelestialUI } from '/src/lib/ui/runtime';
initCelestialUI();

它负责：侧边栏折叠分组/折叠/抽屉、ClerkTOC 追踪、标签页、折叠面板、复制 按钮与主题切换。函数幂等，任何页面调用都安全（无 cpd- 元素时为空操作）。 文档站通过 astro.config.mjs 里的 celestialUiRuntime 集成注入每个页面。

设计令牌见样式规范与 src/lib/ui/tokens.ts。