shadcn/ui 可组合组件库｜复制即用的 React 与 Tailwind 代码翻译站点

shadcn/ui 是一套面向 React 的界面组件集合，做法与常见组件库不同：组件以源码形式复制进项目，而不是作为依赖包安装。开发者拿到代码后可以任意改写样式与结构，不受库的版本约束。

分发方式

站点提供命令行工具，执行一条添加命令，组件文件即写入项目目录，同时带入所需依赖与样式变量。组件基于 Radix UI 的无障碍原语与 Tailwind CSS 的工具类，外观由主题变量控制，深浅色切换只需改一组 CSS 变量。

接入步骤

项目先完成 Tailwind 与路径别名的配置，再执行初始化命令生成配置文件，之后按需添加单个组件。命令可指定目标目录，同一组件允许重复添加，覆盖前会提示冲突。需要成套版式时，直接从区块页复制整段结构，再按业务替换数据源。

组件与区块

• 基础组件：按钮、表单、对话框、下拉菜单、标签页、数据表格等。
• 区块：登录页、仪表盘、定价表等成组版式，可直接拼装。
• 图表：基于 Recharts 封装，配色跟随主题。
• 排版与目录：提供文章排版样式，并收录社区模板。

文档与生态

文档按组件分页，每页给出示例、属性表与可复制的代码，示例本身可切换主题查看效果。代码仓库的星标数在十余万量级，社区衍生的模板与脚手架较多，Next.js 项目接入的案例尤为常见。示例代码多写成独立函数，便于抽取成项目内的通用件，减少在页面里重复堆样式。

适用人群

需要统一设计语言又不想被组件库锁定版本的前端团队；做后台系统与内部工具的开发者；对组件可访问性有要求、又不愿从零处理键盘导航与焦点管理的项目。做外包交付的团队也常把组件源码一并交出，接手方无需再装一套依赖。

使用须知与局限

组件进入仓库后，上游的修复不会自动同步，升级需要手动比对合并。项目需已配置 Tailwind CSS，旧项目迁移有一定改造成本。样式自由度高，也意味着团队要自行约定命名与变体规范。文档以英文为主，中文资料多为社区翻译，属性含义以原文档为准。