shadcn-ui/ui
6 articles
前置知识
- ›TypeScript 基础知识
- ›熟悉 npm/pnpm 包管理
- ›对 React 组件库有基本了解
01
shadcn/ui 架构解析：组件分发系统的工作原理
深入剖析 shadcn/ui monorepo 的整体设计，包括「复制粘贴而非安装包」的核心理念、注册表协议，以及 CLI、文档站点与构建流水线之间的协作关系。
02
Registry 协议：命名空间解析、资源获取与依赖树
深入剖析 registry 子系统——命名空间解析、URL 构造、带缓存的 HTTP 请求、递归依赖解析，以及拓扑排序。
03
AST 级别的代码转换：shadcn/ui 如何将组件适配到你的项目中
深入解析基于 ts-morph 的转换器流水线，了解它如何将组件源代码重写以匹配项目配置。
04
构建 Registry：从组件源码到静态 JSON API
深入介绍将组件源码转换为 ui.shadcn.com/r/ 所提供的静态 JSON API 的构建流水线。
05
项目初始化：从空目录到完整的组件系统配置
追踪 init 命令从调用到完整项目配置的完整流程，涵盖模板选择、框架检测、预设方案以及 monorepo 路由。
06
AI 优先的组件发现机制：MCP Server 与编程式 Registry API
shadcn/ui 如何通过 Model Context Protocol、编程式 API 以及三层接入面设计，将 registry 能力暴露给 AI 编程助手。