Skip to main content
shadcn-ui Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
跳到安装 Skills Marketplace 发现并探索由社区构建的 Agent Skills
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/dirnbauer/webconsulting-skills --skill shadcn-ui命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
下载 Zip 下载中... 同仓库更多 Skills Use when ANY command fails with 'command not found', when installing CLI tools (ripgrep, fd, jq, yq, bat, etc.), auditing project environments, or batch-updating tools. Triggers on: command not found, install tool, missing binary, environment audit, update tools, which, apt install, brew install.
Use when looking up library documentation, API references, framework patterns, or code examples for ANY library (React, Next.js, Vue, Django, Laravel, etc.) and the Context7 MCP server is unavailable or not configured. Fetches the same current docs directly via the Context7 REST API as a fallback. Triggers on: how to use library, API docs, framework pattern, import usage, library example.
Use when evaluating projects for production or enterprise readiness, implementing supply chain security (SLSA, cosign, SBOMs, pnpm), hardening CI/CD pipelines, establishing quality gates (TYPO3: CI matrix PHP 8.2-8.5 x TYPO3 12.4/13.4/14.3 LTS), pursuing OpenSSF Best Practices Badge (Passing/Silver/Gold) or OSPS Baseline levels, reviewing code quality, writing ADRs, or configuring Git hooks and CI pipelines.
name shadcn-ui description Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.
shadcn/ui Component Patterns
Build accessible, customizable UI components with shadcn/ui, Radix UI, and Tailwind CSS.
Overview
Components are copied into your project — you own and customize the code
Built on Radix UI primitives for full accessibility
Styled with Tailwind CSS and CSS variables for theming
CLI-based installation: npx shadcn@latest add <component>
When to Use
Activate when user requests involve:
"Set up shadcn/ui", "initialize shadcn", "add shadcn components"
"Install button/input/form/dialog/card/select/toast/table/chart"
"React Hook Form", "Zod validation", "form with validation"
"accessible components", "Radix UI", "Tailwind theme"
"shadcn button", "shadcn dialog", "shadcn sheet", "shadcn table"
"dark mode", "CSS variables", "custom theme"
"charts with Recharts", "bar chart", "line chart", "pie chart"
Quick Reference
Available Components
Component Install Command Description buttonnpx shadcn@latest add buttonVariants: default, destructive, outline, secondary, ghost, link
input
npx shadcn@latest add input
formnpx shadcn@latest add formReact Hook Form integration with validation
cardnpx shadcn@latest add cardContainer with header, content, footer
dialognpx shadcn@latest add dialogModal overlay
sheetnpx shadcn@latest add sheetSlide-over panel (top/right/bottom/left)
selectnpx shadcn@latest add selectDropdown select
toastnpx shadcn@latest add toastNotification toasts
tablenpx shadcn@latest add tableData table
menubarnpx shadcn@latest add menubarDesktop-style menubar
chartnpx shadcn@latest add chartRecharts wrapper with theming
textareanpx shadcn@latest add textareaMulti-line text input
checkboxnpx shadcn@latest add checkboxCheckbox input
labelnpx shadcn@latest add labelAccessible form label
Instructions
Initialize Project
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npx shadcn@latest init
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
npx shadcn@latest init
npx shadcn@latest add button input form card dialog select toast
Basic Component Usage
import { Button } from "@/components/ui/button"
<Button variant="default" >Default </Button >
<Button variant ="destructive" size ="sm" > Delete</Button > <Button variant ="outline" disabled > Loading...</Button >
Form with Zod Validation "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 , FormField , FormItem , FormLabel , FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
const formSchema = z.object ({
email : z.string ().email ("Invalid email" ),
password : z.string ().min (8 , "Password must be at least 8 characters" ),
})
export function LoginForm (const form = useForm<z.infer <typeof formSchema>>({
resolver : zodResolver (formSchema),
defaultValues : { email : "" , password : "" },
})
return (
<Form {...form }>
<form onSubmit ={form.handleSubmit(console.log)} className ="space-y-4" >
<FormField name ="email" control ={form.control} render ={({ field }) => (
<FormItem >
<FormLabel > Email</FormLabel >
<FormControl > <Input type ="email" {...field } /> </FormControl >
<FormMessage />
</FormItem >
)} />
<FormField name ="password" control ={form.control} render ={({ field }) => (
<FormItem >
<FormLabel > Password</FormLabel >
<FormControl > <Input type ="password" {...field } /> </FormControl >
Dialog (Modal) import { Button } from "@/components/ui/button"
import { Dialog , DialogContent , DialogHeader , DialogTitle , DialogTrigger } from "@/components/ui/dialog"
<Dialog >
<DialogTrigger asChild >
<Button variant ="outline" > Open</Button >
</DialogTrigger > <DialogContent >
<DialogHeader >
<DialogTitle > Edit Profile</DialogTitle >
</DialogHeader >
{/* content */}
</DialogContent > Dialog >
Toast Notification
import { Toaster } from "@/components/ui/toaster"
import { useToast } from "@/components/ui/use-toast"
const { toast } = useToast ()
toast ({ title : "Success" , description : "Changes saved." })
toast ({ variant : "destructive" , title : "Error" , description : "Something went wrong." })
Bar Chart import { Bar , BarChart , CartesianGrid , XAxis } from "recharts"
import { ChartContainer , ChartTooltipContent } from "@/components/ui/chart"
const chartConfig = {
desktop : { label : "Desktop" , color : "var(--chart-1)" },
} satisfies import ("@/components/ui/chart" ).ChartConfig
<ChartContainer config={chartConfig} className="min-h-[200px] w-full" >
<BarChart data ={data} >
<CartesianGrid vertical ={false} />
<XAxis dataKey ="month" />
<Bar dataKey ="desktop" fill ="var(--color-desktop)" radius ={4} />
<ChartTooltip content ={ <ChartTooltipContent /> } />
</BarChart > ChartContainer >
Examples
Login Form with Validation "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 , FormField , FormItem , FormLabel , FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
const formSchema = z.object ({
email : z.string ().email ("Invalid email" ),
password : z.string ().min (8 , "Min 8 characters" ),
})
export function LoginForm (const form = useForm<z.infer <typeof formSchema>>({
resolver : zodResolver (formSchema),
defaultValues : { email : "" , password : "" },
})
return (
<Form {...form }>
<form onSubmit ={form.handleSubmit(console.log)} className ="space-y-4" >
<FormField name ="email" control ={form.control} render ={({ field }) => (
<FormItem >
<FormLabel > Email</FormLabel >
<FormControl > <Input type ="email" {...field } /> </FormControl >
<FormMessage />
</FormItem >
)} />
<FormField name ="password" control ={form.control} render ={({ field }) => (
<FormItem >
<FormLabel > Password</FormLabel >
<FormControl > <Input type ="password" {...field } /> </FormControl >
Data Table with Actions import { ColumnDef } from "@tanstack/react-table"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { DataTable } from "@/components/ui/data-table"
const columns : ColumnDef <User >[] = [
{ id : "select" , header : ({ table } ) => (
<Checkbox checked ={table.getIsAllPageRowsSelected()} /> cell : ({ row } ) => (
<Checkbox checked ={row.getIsSelected()} /> accessorKey : "name" , header : "Name" },
{ accessorKey : "email" , header : "Email" },
{ id : "actions" , cell : ({ row } ) => (
<Button variant ="ghost" size ="sm" > Edit</Button >
Dialog with Form import { Button } from "@/components/ui/button"
import { Dialog , DialogContent , DialogHeader , DialogTitle , DialogTrigger } from "@/components/ui/dialog"
<Dialog >
<DialogTrigger asChild >
<Button variant ="outline" > Add User</Button >
</DialogTrigger > <DialogContent >
<DialogHeader >
<DialogTitle > Add New User</DialogTitle >
</DialogHeader >
{/* <LoginForm /> */}
</DialogContent > Dialog >
Toast Notifications import { useToast } from "@/components/ui/use-toast"
import { Button } from "@/components/ui/button"
const { toast } = useToast ()
toast ({ title : "Saved" , description : "Changes saved successfully." })
toast ({ variant : "destructive" , title : "Error" , description : "Failed to save." })
Best Practices
Accessibility : Use Radix UI primitives — ARIA attributes are built inClient Components : Add "use client" for interactive components (hooks, events)Type Safety : Use TypeScript and Zod schemas for form validationTheming : Configure CSS variables in globals.css for consistent designCustomization : Modify component files directly — you own the codePath Aliases : Ensure @ alias is configured in tsconfig.jsonRegistry Security : Only install components from trusted registries; review generated code before production useDark Mode : Set up with CSS variables strategy and next-themesForms : Always use Form, FormField, FormItem, FormLabel, FormMessage togetherToaster : Add <Toaster /> once to root layout
Constraints and Warnings
Not an NPM Package : Components are copied to your project; they are not a versioned dependencyRegistry Security : Components from npx shadcn@latest add are fetched remotely; always verify the registry source is trusted before installationClient Components : Most interactive components require "use client" directiveRadix Dependencies : Ensure all @radix-ui packages are installedTailwind Required : Components rely on Tailwind CSS utilitiesPath Aliases : Configure @ alias in tsconfig.json for imports
References Consult these files for detailed patterns and code examples:
references/setup-and-configuration.md references/ui-components.md references/forms-and-validation.md references/charts-components.md references/nextjs-integration.md references/customization.md
Credits & Attribution Special thanks to Giuseppe Trisciuoglio for their generous open-source contributions, which helped shape this skill collection.
Adapted by webconsulting.at for this skill collection
<FormMessage />
</FormItem >
<Button type ="submit" >
</Button >
</form >
</Form >
<FormMessage />
</FormItem >
<Button type ="submit" >
</Button >
</form >
</Form >
