shadcn/ui组件开发

技能简介

shadcn/ui 是一套基于 Radix UI 原语的 React 组件集合，采用复制粘贴方式集成到项目中。与常规组件库不同，代码直接归属开发者，可自由修改定制。配合 Tailwind CSS、react-hook-form 和 zod 使用，可快速搭建生产级界面。

业务背景

shadcn/ui帮助前端团队快速搭建专业级Web界面。开发者通过命令行一键获取组件源码，直接拥有代码所有权，可自由调整样式与逻辑，避免传统组件库的版本锁定和定制受限问题。配合表单验证与主题系统，能显著缩短中后台系统、数据看板、营销页面的开发周期，同时保证视觉一致性和交互体验。

落地案例：某运营后台需新建用户管理模块：开发者在Next.js项目中执行npx shadcn add table form dialog，将数据表格、带校验的编辑表单、确认弹窗组件安装至本地目录。基于Tailwind CSS调整表格列宽与表单配色，用react-hook-form+zod实现手机号格式校验与提交拦截。最终交付响应式页面，支持暗色模式切换，全程无需从零编写基础组件。

能做什么

• 通过命令行初始化并添加各类 UI 组件
• 构建响应式布局、导航菜单、侧边栏结构
• 实现带校验的复杂表单（联动 react-hook-form + zod）
• 配置主题系统与暗色/亮色模式切换
• 创建对话框、抽屉、通知等交互反馈层
• 搭建数据表格、命令面板、轮播等展示组件

使用说明

步骤一：初始化项目

npx shadcn@latest init

步骤二：添加所需组件

# 单个添加
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dialog
npx shadcn@latest add form
npx shadcn@latest add input
npx shadcn@latest add select
npx shadcn@latest add table
npx shadcn@latest add toast
npx shadcn@latest add dropdown-menu
npx shadcn@latest add sheet
npx shadcn@latest add tabs
npx shadcn@latest add sidebar

# 批量添加
npx shadcn@latest add button card input label textarea select checkbox

步骤三：在代码中引入使用

组件安装至 @/components/ui/ 目录，按常规 React 组件方式导入即可。表单场景需额外安装 react-hook-form、@hookform/resolvers、zod 等依赖。

输入与输出

见下方输入与输出表格。

风险提示

• 组件代码直接嵌入项目，后续官方更新需手动同步
• 依赖 Tailwind CSS，需确保样式配置正确
• 表单验证依赖外部库版本兼容性
• 部分组件（如 data-table）需额外安装 @tanstack/react-table

来源信息

原始链接：https://github.com/openclaw/skills/tree/main/skills/jgarrison929/shadcn-ui/SKILL.md
来源类型：GitHub 技能文档