名称: Shadcn UI 组件库 描述: 使用shadcn/ui库，结合Radix UI原语和Tailwind CSS样式，构建美观、可访问的UI组件，您拥有并可自定义。适用于创建可访问的组件库、实现常见的UI模式（如对话框、下拉菜单、工具提示、弹窗）、构建带验证和错误处理的表单、创建可排序、可过滤的数据表、实现命令面板（Cmd+K接口）、使用Radix UI原语进行自定义样式、用Tailwind CSS定制组件或构建您完全拥有的设计系统。
Shadcn UI - 可重用组件库
何时使用此技能
- 创建可访问的UI组件库
- 实现对话框、下拉菜单、工具提示、弹窗
- 构建带验证和错误处理的表单
- 创建可排序、可过滤的数据表
- 实现命令面板（Cmd+K接口）
- 使用Radix UI原语进行自定义样式
- 用Tailwind CSS定制组件
- 构建您完全拥有的设计系统
- 实现可访问的键盘导航
- 创建一致、可主题化的组件
- 使用预建的可访问模式
- 构建与您的设计系统匹配的组件
何时使用此技能
- 使用Shadcn、Radix UI原语、Tailwind CSS构建UI
- 在相关任务或功能上工作时
- 在需要此专业知识的开发过程中
使用场景: 使用Shadcn、Radix UI原语、Tailwind CSS构建UI。
安装
npx shadcn-ui@latest add button
使用方法
import { Button } from '@/components/ui/button';
<Button variant="destructive">删除</Button>