name: shadcn-ui-components description: 使用 shadcn/ui 库构建美观、可访问的 UI 组件，结合 Radix UI 原语和 Tailwind CSS 样式，您可以完全拥有和自定义代码。当创建可访问的组件库、实现常见 UI 模式（对话框、下拉菜单、工具提示）、构建带验证的表单、创建数据表格、实现命令面板、使用 Radix UI 原语、自定义组件与 Tailwind，或构建完全拥有代码的设计系统时使用。
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">Delete</Button>