# Shadcn/ui组件库技巧 ## 概述 Shadcn/ui 提供基于 Radix UI 原语和 Tailwind CSS 构建的复制粘贴组件。组件通过 CLI 添加到您的项目中，而不是作为依赖项安装。 # 添加组件 Bunx --bun shadcn@latest 添加按钮卡对话框表单 # 添加多个 Bunx --bun shadcn@latest 添加按钮卡输入标签 ** ** ## 核心组件 ### 按钮从“@/components/ui/button”导入{Button} // 变体 <按钮变体=“默认”>主要 <按钮变体=“次要”>次要 <按钮变体=“大纲”>大纲 <按钮变体=“幽灵”>幽灵 <按钮变体=“链接”>链接 <按钮变体=“破坏性”>破坏性 // 尺寸 <按钮尺寸=“sm”>小 <按钮大小=“默认”>默认 <按钮大小=“lg”>大 <按钮大小=“图标”> // 带图标 <按钮> 添加项目 // 加载状态 <按钮禁用> 请稍候 // 作为子元素（呈现为不同的元素） <作为子按钮的按钮> 转到仪表板 ### 输入和标签从“@/components/ui/input”导入{输入} 从“@/components/ui/label”导入{标签}

<标签 htmlFor="电子邮件">电子邮件 <输入 id=“电子邮件” 类型=“电子邮件” 占位符=“name@example.com” />

// 带图标

// 禁用 <输入禁用值=“无法编辑”/> ### 卡导入{ 卡，卡头，卡片标题，卡说明，卡片内容，卡页脚， } 来自“@/components/ui/card” <卡片> <卡片标题> 卡片标题卡片描述文字 <卡片内容>

此处显示卡片内容

<按钮变体=“大纲”>取消 <按钮>保存 // 可点击的卡片 <卡片标题> 可点击卡片 ### 选择导入{ 选择，选择内容，选择项目，选择触发器，选择值，选择组，选择标签， } 来自“@/components/ui/select” <选择值={value} onValueChange={setValue}> <选择内容> <选择组> 水果苹果香蕉橙色 ### 复选框和开关从“@/components/ui/checkbox”导入{复选框} 从“@/components/ui/switch”导入{Switch} // 复选框

接受条款

// 切换

启用通知

** ** ## 对话框和叠加层 ### 对话框（模态）导入{ 对话，对话内容，对话框描述，对话框页脚，对话框标题，对话框标题, 对话触发器，对话框关闭，来自“@/components/ui/dialog” 函数 EditUserDialog({ 用户 }: { 用户: 用户 }) { const [打开，设置打开] = useState(false) 返回（ <对话框打开={open} onOpenChange={setOpen}> 编辑用户 <对话框标题> 编辑个人资料 <对话框描述> 在此处更改您的个人资料。

<标签 htmlFor="name">名称 <输入id =“名称”defaultValue = {用户名} />

<对话框页脚> <对话框作为子项关闭> <按钮变体=“大纲”>取消） } ### AlertDialog（确认）导入{ 警报对话框，警报对话框操作，警报对话框取消，警报对话框内容，警报对话框描述，警报对话框页脚，警报对话框标题，警报对话框标题，警报对话框触发器，来自“@/components/ui/alert-dialog” <警报对话框> <按钮变体=“破坏性”>删除 <警报对话框内容> <警报对话框标题> 您确定吗？ <警报对话框描述> 此操作无法撤消。这将永久删除来自我们服务器的项目。 <警报对话框页脚> 取消删除 ### 工作表（侧面板）导入{ 板材、工作表内容，表描述，表头，工作表标题，表触发器，表页脚，表关闭，来自“@/components/ui/sheet” <表> 打开设置 <表头> 设置配置您的首选项

{/* 设置内容 */}

<表页脚> <工作表关闭为子> <按钮>保存 // 侧面：“顶部”| “底部”| “左”| “正确的” ### 抽屉（适合移动设备）导入{ 抽屉，抽屉内容，抽屉描述，抽屉标题，抽屉标题，抽屉触发器，抽屉页脚，抽屉关闭，来自“@/components/ui/drawer” <抽屉> <按钮>打开抽屉 <抽屉内容> <抽屉标题> 移动目标设置您的每日活动目标。

{/* 抽屉内容 */}

<抽屉页脚> <按钮>提交 <抽屉关闭为儿童> <按钮变体=“大纲”>取消 ### 弹出窗口导入{ 弹出窗口，弹出内容，弹出窗口触发器，来自“@/components/ui/popover” <弹出框> 打开弹出窗口

尺寸

设置图层的尺寸。

{/* 表单字段 */}

** ** ## 命令面板导入{ 命令，命令对话框，命令为空，指挥组，命令输入，命令项，命令列表，命令分隔符，命令快捷键， } 来自“@/components/ui/command” 函数命令菜单() { const [打开，设置打开] = useState(false) 使用效果（（）=> { const down = (e: KeyboardEvent) => { if (e.key === "k" && (e.metaKey || e.ctrlKey)) { e.preventDefault() setOpen((打开) => !打开) } } document.addEventListener("keydown", down) return () => document.removeEventListener("keydown", down) }, []) 返回（ <命令列表> 未找到结果。导航("/dashboard")}> 仪表板导航("/settings")}> 设置 <命令快捷方式>⌘S <命令分隔符/> 新建 <命令快捷方式>⌘N ） } ** ** ## 下拉菜单导入{ 下拉菜单，下拉菜单内容，下拉菜单项，下拉菜单标签，下拉菜单分隔符，下拉菜单触发器，下拉菜单复选框项，下拉菜单无线电组，下拉菜单单选项，下拉菜单子，下拉菜单子内容，下拉菜单子触发器，来自“@/components/ui/dropdown-menu” <下拉菜单> <按钮变体=“幽灵”大小=“图标”> 操作 <下拉菜单分隔符/> 编辑重复 <下拉菜单分隔符/> <下拉菜单项 className =“文本破坏性焦点：文本破坏性” onClick={handleDelete} > 删除 ** ** ## 标签从“@/components/ui/tabs”导入 { Tabs, TabsContent, TabsList, TabsTrigger } <选项卡defaultValue =“概述”className =“w-full”> 概述分析设置 <卡片> <卡片标题> 概述 {/* 内容 */} {/* 分析内容 */} {/* 设置内容 */} ** ** ## Toast 通知 (Sonner) 从“sonner”导入{toast} // 成功 toast.success("个人资料更新成功") // 错误 toast.error("保存更改失败") // 带描述 toast("活动已创建", { 描述：“您的活动已安排在明天下午 3 点”， }) // 带动作 toast("文件已上传", { 行动：{ 标签：“查看”， onClick: () => 导航("/files"), }, }) // 承诺祝酒 toast.promise(saveData(), { 加载：“正在保存...”， success: "数据已保存！", 错误：“无法保存数据”， }) // 自定义时长 toast("快速消息", { 持续时间: 2000 }) // 可驳回 const toastId = toast("正在处理...") // 稍后：toast.dismiss(toastId) ** ** ## 数据表模式导入{ 表，桌体，表格单元格，桌头，表头，表行， } 来自“@/components/ui/table” 从“@tanstack/react-table”导入{useReactTable，flexRender} 函数 DataTable({ 列，数据， }：{ 列：ColumnDef[] 数据：TData[] }) { 常量表 = useReactTable({ 数据，列，获取CoreRowModel: getCoreRowModel(), }) 返回（

<表> <表头> {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((标题) => ( {header.isPlaceholder ？空 : 弹性渲染( header.column.columnDef.header， header.getContext() )} ))} ))} <表体> {table.getRowModel().rows?.length ? （ table.getRowModel().rows.map((行) => ( {row.getVisibleCells().map((单元格) => ( {flexRender(cell.column.columnDef.cell, cell.getContext())} ))} ）） ) : ( <表行> 没有结果。 )}

） } ** ** ## 带有 React Hook 表单的表单从“react-hook-form”导入 { useForm } 从“@hookform/resolvers/zod”导入{zodResolver} 从“zod”导入{z} 导入{ 形式，表单控件，表格描述，表单字段，表单项，表单标签，表单消息，来自“@/components/ui/form” const formSchema = z.object({ 用户名：z.string().min(2).max(50), 电子邮件：z.string().email(), }) 函数 ProfileForm() { const form = useForm>({ 解析器：zodResolver(formSchema), 默认值：{ 用户名：“”，电子邮件：“”， }, }) 函数 onSubmit(值: z.infer) { 控制台.log(值) } 返回（ <表格{...表格}>

<表单域控制={form.control} 名称=“用户名” 渲染={({字段})=>( <表单项> 用户名 <表单控件> <输入占位符=“johndoe”{...字段} /> <表单描述> 这是您的公开显示名称。 <表单消息/> )} /> <表单域控制={form.control} 姓名=“电子邮件” 渲染={({字段})=>( <表单项> 电子邮件 <表单控件> <输入类型=“电子邮件”{...字段} /> <表单消息/> )} /> <按钮类型=“提交”>提交） } ** ** ## 实用程序：cn() 函数从“clsx”导入{类型ClassValue，clsx} 从“tailwind-merge”导入 { twMerge } 导出函数 cn(...输入: ClassValue[]) { 返回 twMerge(clsx(输入)) } // 用法 - 智能合并 Tailwind 类

** ** ## 骨架加载从“@/components/ui/skeleton”导入{骨架} 函数 UserCardSkeleton() { 返回（ <卡片>

<卡片内容> ） } ** ** ## 头像从“@/components/ui/avatar”导入 { Avatar, AvatarFallback, AvatarImage } <头像> {user.name.slice(0, 2).toUpperCase()} // 带有类名的大小 {/* 小 */} {/* 默认 */} {/* 大 */} ** ** ## 徽章从“@/components/ui/badge”导入{徽章} <徽章>默认 <徽章变体=“次要”>次要 <徽章变体=“outline”>大纲 <徽章变体=“破坏性”>破坏性 // 自定义颜色活动 ** ** ## 滚动区域从“@/components/ui/scroll-area”导入{ScrollArea} {items.map((item) => (

{项目.名称}

))} // 水平

{items.map((item) => )}

** ** ## 工具提示导入{ 工具提示，工具提示内容，工具提示提供者，工具提示触发器，来自“@/components/ui/tooltip” // 将应用程序包装在 TooltipProvider 中 <工具提示提供者> <应用程序/> // 用法 <工具提示> <按钮变体=“幽灵”大小=“图标”> <工具提示内容>

这里有帮助信息

** ** ## 官方参考资料 * * * * * * ## 共享样式指南基线 * 使用通用语言/框架规则的共享样式指南来减少此技能的重复。 * [一般原则]() * [Tailwind 和 Shadcn]() * [反应]() * 将此技能重点关注特定于工具的工作流程、边缘情况和集成细节。

沙德网

包含技能