用途:该技能用于指导使用 shadcn/ui、Radix UI 与 Tailwind CSS 构建可访问且可定制的 UI 组件,适合新建项目初始化、单独组件安装配置、表单校验、可访问组件创建、Tailwind 样式定制、设计系统落地及 Next.js/TypeScript 应用开发等场景。
主要能力:覆盖 Button、Input 与表单字段、带校验的 Forms、Card、Dialog、Select、Sheet、Menubar 与导航、Table、Toast 等核心组件,并涉及自定义、Next.js 集成与最佳实践。资料说明 shadcn/ui 并非传统组件库或 npm 包,而是可复制进项目的可复用组件集合,代码归使用者所有,基于 Radix UI 原语实现可访问性,样式使用 Tailwind CSS,并提供 CLI 工具安装组件。
使用方式:新项目可用 npx create-next-app@latest my-app --typescript --tailwind --eslint --app 创建,进入目录后执行 npx shadcn@latest init 初始化,再用 npx shadcn@latest add button input form card dialog select 安装组件。已有项目可先运行 npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react,然后执行 npx shadcn@latest init。也可通过 npm install @radix-ui/react-slot 等依赖手动安装并在 src/components/ui/ 放置组件代码。
限制:资料未提供具体收费、价格、平台支持范围与效果保证等信息,暂未提供。