Skills ZICQ category：Agent Workflows shadcn-ui

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.

22738 installs

Official URL：skills.sh

What this skill does

Intro in this page language first. The official description stays in its original wording; we do not rewrite SKILL.md.

What it does

Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components

When to use it

Activate when user requests involve:

How agents load it

Per Agent Skills progressive disclosure: name and description load at startup (~100 tokens); the full SKILL.md body loads when the skill activates; scripts/, references/, and assets/ load only as needed. This file's sections: shadcn/ui Component Patterns; Overview; When to Use; Quick Reference; Available Components; Instructions.

File analysis

File analysis: besides SKILL.md, the body references references/forms-and-validation.md, references/charts-components.md, references/setup-and-configuration.md, references/ui-components.md. Those resources load on demand.

shadcn/ui Component PatternsOverviewWhen to UseQuick ReferenceAvailable ComponentsInstructionsInitialize ProjectNew Next.js projectExisting projectInstall componentsBasic Component UsageForm with Zod Validation

· allowed-tools：Read, Write, Bash, Edit, Glob

Source category：skills.sh agent-skill

Sources & links

Market sources：skills.sh

Full package on GitHub

OSS Skill ranking

SKILL.md & Agent activation

Official spec ↗

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.
allowed-tools: Read, Write, Bash, Edit, GlobExperimental field; support depends on the client and does not grant permissions by itself.

DiscoverThe client exposes names and descriptions to the agent.
ActivateYour request or the task context selects the skill and loads its instructions.
Load resourcesReferenced scripts, documentation and assets are used when needed.

Files referenced by the instructions · 4

references/forms-and-validation.md
references/charts-components.md
references/setup-and-configuration.md
references/ui-components.md

These paths are extracted from the text. Check the upstream package to verify the files exist.

Invocation syntax and available tools depend on your Agent client. Client integration guide ↗

Install this skill

Skills CLI ↗

Choose the target agent and installation scope, keep referenced package files, then verify the skill appears in the client's catalog.

This skill references supporting files. Retrieve the complete directory from the source; copying SKILL.md alone may leave missing dependencies.

Ask your Agent to install

Copy these instructions to a compatible agent and confirm the target directory matches your client.

Install the agent skill "shadcn-ui" into my project. The full SKILL.md and official description are at https://zicq.com/en/skills/skl-969ab483edf73ca0-Shadcn-Ui.html
Save it as .cursor/skills/shadcn-ui/SKILL.md or .claude/skills/shadcn-ui/SKILL.md and keep the frontmatter name and description exactly as-is.
This skill also ships scripts/, references/, or assets/ — fetch the whole folder from https://github.com/giuseppe-trisciuoglio/developer-kit instead of creating only a SKILL.md.

Full package on GitHub ↗

Install from the terminal · Skills CLI

Requires Node.js and npx. First inspect the repository's skill list to confirm the name.

npx skills add 'https://github.com/giuseppe-trisciuoglio/developer-kit' --list

Target agent Installation scope

npx skills add 'https://github.com/giuseppe-trisciuoglio/developer-kit' --skill 'shadcn-ui'

The CLI lets you choose the agent interactively. The default scope is the project; use -g for user scope. Confirm package availability with the discovery command, then use npx skills list to inspect installed skills.

SKILL.md source Copy freely; the source file is unchanged

# 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 |
|-----------|----------------|-------------|
| `button` | `npx shadcn@latest add button` | Variants: default, destructive, outline, secondary, ghost, link |
| `input` | `npx shadcn@latest add input` | Text input field |
| `form` | `npx shadcn@latest add form` | React Hook Form integration with validation |
| `card` | `npx shadcn@latest add card` | Container with header, content, footer |
| `dialog` | `npx shadcn@latest add dialog` | Modal overlay |
| `sheet` | `npx shadcn@latest add sheet` | Slide-over panel (top/right/bottom/left) |
| `select` | `npx shadcn@latest add select` | Dropdown select |
| `toast` | `npx shadcn@latest add toast` | Notification toasts |
| `table` | `npx shadcn@latest add table` | Data table |
| `menubar` | `npx shadcn@latest add menubar` | Desktop-style menubar |
| `chart` | `npx shadcn@latest add chart` | Recharts wrapper with theming |
| `textarea` | `npx shadcn@latest add textarea` | Multi-line text input |
| `checkbox` | `npx shadcn@latest add checkbox` | Checkbox input |
| `label` | `npx shadcn@latest add label` | Accessible form label |

## Instructions

### Initialize Project

```bash
# New Next.js project
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npx shadcn@latest init

# Existing project
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
npx shadcn@latest init

# Install components
npx shadcn@latest add button input form card dialog select toast
```

### Basic Component Usage

```tsx
// Button with variants and sizes
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

```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, 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>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit">Login</Button>
      </form>
    </Form>
  )
}
```

See [references/forms-and-validation.md](references/forms-and-validation.md) for advanced multi-field forms, contact forms with API submission, and login card patterns.

### Dialog (Modal)

```tsx
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

```tsx
// 1. Add <Toaster /> to app/layout.tsx
import { Toaster } from "@/components/ui/toaster"

// 2. Use in components
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

```tsx
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>
```

See [references/charts-components.md](references/charts-components.md) for Line, Area, and Pie chart examples.

## Examples

### Login Form with Validation
```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, 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: "" },
  })

### Data Table with Actions
```tsx
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
```tsx
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
```tsx
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 in
- **Client Components**: Add `"use client"` for interactive components (hooks, events)
- **Type Safety**: Use TypeScript and Zod schemas for form validation
- **Theming**: Configure CSS variables in `globals.css` for consistent design
- **Customization**: Modify component files directly — you own the code
- **Path Aliases**: Ensure `@` alias is configured in `tsconfig.json`
- **Registry Security**: Only install components from trusted registries; review generated code before production use
- **Dark Mode**: Set up with CSS variables strategy and `next-themes`
- **Forms**: Always use `Form`, `FormField`, `FormItem`, `FormLabel`, `FormMessage` together
- **Toaster**: Add `<Toaster />` once to root layout

## Constraints and Warnings

- **Not an NPM Package**: Components are copied to your project; they are not a versioned dependency
- **Registry Security**: Components from `npx shadcn@latest add` are fetched remotely; always verify the registry source is trusted before installation
- **Client Components**: Most interactive components require `"use client"` directive
- **Radix Dependencies**: Ensure all `@radix-ui` packages are installed
- **Tailwind Required**: Components rely on Tailwind CSS utilities
- **Path Aliases**: Configure `@` alias in `tsconfig.json` for imports

## References

Consult these files for detailed patterns and code examples:

- **[references/setup-and-configuration.md](references/setup-and-configuration.md)** — Full installation, tsconfig, tailwind config, CSS variables
- **[references/ui-components.md](references/ui-components.md)** — Button, Input, Card, Dialog, Sheet, Select, Toast, Table, Menubar
- **[references/forms-and-validation.md](references/forms-and-validation.md)** — React Hook Form + Zod, advanced forms, login card, contact form
- **[references/charts-components.md](references/charts-components.md)** — Bar, Line, Area, Pie charts with ChartContainer and theming
- **[references/nextjs-integration.md](references/nextjs-integration.md)** — App Router, Server/Client Components, dark mode, metadata
- **[references/customization.md](references/customization.md)** — Custom variants, CSS variables, cn() utility, extending components

Found this skill helpful?

🚀 Share a Work Built With It

Readable layout

--- 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. allowed-tools: Read, Write, Bash, Edit, Glob --- # 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 ` ## 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 | |-----------|----------------|-------------| | `button` | `npx shadcn@latest add button` | Variants: default, destructive, outline, secondary, ghost, link | | `input` | `npx shadcn@latest add input` | Text input field | | `form` | `npx shadcn@latest add form` | React Hook Form integration with validation | | `card` | `npx shadcn@latest add card` | Container with header, content, footer | | `dialog` | `npx shadcn@latest add dialog` | Modal overlay | | `sheet` | `npx shadcn@latest add sheet` | Slide-over panel (top/right/bottom/left) | | `select` | `npx shadcn@latest add select` | Dropdown select | | `toast` | `npx shadcn@latest add toast` | Notification toasts | | `table` | `npx shadcn@latest add table` | Data table | | `menubar` | `npx shadcn@latest add menubar` | Desktop-style menubar | | `chart` | `npx shadcn@latest add chart` | Recharts wrapper with theming | | `textarea` | `npx shadcn@latest add textarea` | Multi-line text input | | `checkbox` | `npx shadcn@latest add checkbox` | Checkbox input | | `label` | `npx shadcn@latest add label` | Accessible form label | ## Instructions ### Initialize Project ```bash # New Next.js project npx create-next-app@latest my-app --typescript --tailwind --eslint --app cd my-app npx shadcn@latest init # Existing project npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react npx shadcn@latest init # Install components npx shadcn@latest add button input form card dialog select toast ``` ### Basic Component Usage ```tsx // Button with variants and sizes import { Button } from "@/components/ui/button" Default Delete Loading... ``` ### Form with Zod Validation ```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, 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>({ resolver: zodResolver(formSchema), defaultValues: { email: "", password: "" }, }) return ( ( Email )} /> ( Password )} /> Login ) } ``` See [references/forms-and-validation.md](references/forms-and-validation.md) for advanced multi-field forms, contact forms with API submission, and login card patterns. ### Dialog (Modal) ```tsx import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" Open Edit Profile {/* content */} ``` ### Toast Notification ```tsx // 1. Add to app/layout.tsx import { Toaster } from "@/components/ui/toaster" // 2. Use in components 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 ```tsx 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 } /> ``` See [references/charts-components.md](references/charts-components.md) for Line, Area, and Pie chart examples. ## Examples ### Login Form with Validation ```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, 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>({ resolver: zodResolver(formSchema), defaultValues: { email: "", password: "" }, }) return ( ( Email )} /> ( Password )} /> Login ) } ``` ### Data Table with Actions ```tsx 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[] = [ { id: "select", header: ({ table }) => ( ), cell: ({ row }) => ( )}, { accessorKey: "name", header: "Name" }, { accessorKey: "email", header: "Email" }, { id: "actions", cell: ({ row }) => ( Edit )}, ] ``` ### Dialog with Form ```tsx import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" Add User Add New User {/* */} ``` ### Toast Notifications ```tsx 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 in - **Client Components**: Add `"use client"` for interactive components (hooks, events) - **Type Safety**: Use TypeScript and Zod schemas for form validation - **Theming**: Configure CSS variables in `globals.css` for consistent design - **Customization**: Modify component files directly — you own the code - **Path Aliases**: Ensure `@` alias is configured in `tsconfig.json` - **Registry Security**: Only install components from trusted registries; review generated code before production use - **Dark Mode**: Set up with CSS variables strategy and `next-themes` - **Forms**: Always use `Form`, `FormField`, `FormItem`, `FormLabel`, `FormMessage` together - **Toaster**: Add `` once to root layout ## Constraints and Warnings - **Not an NPM Package**: Components are copied to your project; they are not a versioned dependency - **Registry Security**: Components from `npx shadcn@latest add` are fetched remotely; always verify the registry source is trusted before installation - **Client Components**: Most interactive components require `"use client"` directive - **Radix Dependencies**: Ensure all `@radix-ui` packages are installed - **Tailwind Required**: Components rely on Tailwind CSS utilities - **Path Aliases**: Configure `@` alias in `tsconfig.json` for imports ## References Consult these files for detailed patterns and code examples: - **[references/setup-and-configuration.md](references/setup-and-configuration.md)** — Full installation, tsconfig, tailwind config, CSS variables - **[references/ui-components.md](references/ui-components.md)** — Button, Input, Card, Dialog, Sheet, Select, Toast, Table, Menubar - **[references/forms-and-validation.md](references/forms-and-validation.md)** — React Hook Form + Zod, advanced forms, login card, contact form - **[references/charts-components.md](references/charts-components.md)** — Bar, Line, Area, Pie charts with ChartContainer and theming - **[references/nextjs-integration.md](references/nextjs-integration.md)** — App Router, Server/Client Components, dark mode, metadata - **[references/customization.md](references/customization.md)** — Custom variants, CSS variables, cn() utility, extending components

Related skills

Agent Workflows

Shadcn Ui

What this skill does

What it does

When to use it

How agents load it

File analysis

SKILL.md & Agent activation

Install this skill

Related skills

Skill Creator

Clawdhub

Agent Team Orchestration

Superpowers