个人中心
今日签到
私信列表
消息中心
搜索全站
q_code

扫码关注官方微信
cell_code

扫码下载APP
返回顶部
技能集市 > AI智能 > shadcn-ui
s

shadcn-uishadcn-ui组件

Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.

作者: admin | 来源: ClawHub
下载
源自
ClawHub
版本
V 1.0.0
安全检测
已通过
7,257
下载量
免费
免费
8
收藏
概述
安装方式
版本历史

shadcn-ui

shadcn/ui 专家

使用 shadcn/ui、Tailwind CSS、react-hook-form 和 zod 构建生产级 UI 的全面指南。

核心概念

shadcn/ui 不是一个组件库——它是基于 Radix UI 原语构建的可复制粘贴组件集合。你拥有代码的所有权。组件是添加到你的项目中，而不是作为依赖项安装。

安装

bash

在 Next.js 项目中初始化 shadcn/ui


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

组件分类及使用场景

布局与导航
组件使用场景
sidebar带有可折叠部分的应用程序级导航
navigation-menu
带有下拉菜单的顶级网站导航 |

| breadcrumb | 显示页面层级/位置 | | tabs | 在同一上下文中切换相关视图 | | separator | 内容区域之间的视觉分隔线 | | sheet | 滑出面板（移动端导航、筛选器、详情视图） | | resizable | 可调整大小的面板布局 |

表单与输入
组件使用场景
form任何需要验证的表单（包装 react-hook-form）
input
文本、邮箱、密码、数字输入 |

| textarea | 多行文本输入 | | select | 从列表中选择（类似原生） | | combobox | 可搜索的选择框（使用 command + popover） | | checkbox | 布尔或多选开关 | | radio-group | 从小集合中单选 | | switch | 开/关切换（设置、偏好） | | slider | 数值范围选择 | | date-picker | 日期选择（使用 calendar + popover） | | toggle | 按下/未按下状态（工具栏按钮） |

反馈与覆盖层
组件使用场景
dialog模态确认、表单或详情视图
alert-dialog
破坏性操作确认（你确定吗？） |

| sheet | 表单、筛选器、移动端导航的侧面板 | | toast | 简短的非阻塞通知（通过 sonner） | | alert | 内联状态消息（信息、警告、错误） | | tooltip | 图标/按钮的悬停提示 | | popover | 点击时显示丰富内容（颜色选择器、日期选择器） | | hover-card | 悬停时预览内容（用户资料、链接） | | skeleton | 加载占位符 | | progress | 任务完成指示器 |

数据展示
组件使用场景
table表格数据展示
data-table
支持排序、筛选、分页的表格（使用 @tanstack/react-table） |

| card | 带有头部、主体、底部的内容容器 | | badge | 状态标签、标签、计数 | | avatar | 用户头像 | | accordion | 可折叠的常见问题或设置区域 | | carousel | 图片/内容轮播 | | scroll-area | 自定义可滚动容器 |

操作
组件使用场景
button主要操作、表单提交
dropdown-menu
上下文菜单、操作菜单 |

| context-menu | 右键菜单 | | menubar | 应用程序菜单栏 | | command | 命令面板/搜索（⌘K） |

表单模式（react-hook-form + zod）

完整表单示例

bash
npx shadcn@latest add form input select textarea checkbox button

tsx
use client

import { zodResolver } from @hookform/resolvers/zod
import { useForm } from react-hook-form
import { z } from zod
import { Button } from @/components/ui/button
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from @/components/ui/form
import { Input } from @/components/ui/input
import { Textarea } from @/components/ui/textarea
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from @/components/ui/select
import { Checkbox } from @/components/ui/checkbox
import { toast } from sonner

const formSchema = z.object({
name: z.string().min(2, 姓名至少需要2个字符),
email: z.string().email(邮箱地址无效),
role: z.enum([admin, user, editor], { required_error: 请选择一个角色 }),
bio: z.string().max(500).optional(),
notifications: z.boolean().default(false),
})

type FormValues = z.infer

export function UserForm() {
const form = useForm({
resolver: zodResolver(formSchema),
defaultValues: {
name: ,
email: ,
bio: ,
notifications: false,
},
})

async function onSubmit(values: FormValues) {
try {
await createUser(values)
toast.success(用户创建成功)
form.reset()
} catch (error) {
toast.error(创建用户失败)
}
}

return (



control={form.control}
name=name
render={({ field }) => (

姓名





)}
/>

control={form.control}
name=email
render={({ field }) => (

邮箱





)}
/>

control={form.control}
name=role
render={({ field }) => (

角色



)}
/>

control={form.control}
name=bio
render={({ field }) => (

个人简介