Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
giuseppe-trisciuoglio avatar

Shadcn Ui

giuseppe-trisciuoglio/developer-kit

  • 19.3k installs
  • 311 repo stars
  • Updated June 22, 2026
  • giuseppe-trisciuoglio/developer-kit

shadcn-ui is a React component library providing copy-paste accessible UI templates built with Tailwind CSS and Radix UI.

About

shadcn-ui is a collection of accessible React components built with Tailwind CSS and Radix UI primitives. It provides copy-paste component templates that developers customize for their projects rather than a traditional dependency. Developers use it to accelerate UI development with production-ready, accessible components.

  • Pre-built accessible React component library
  • Customizable with Tailwind CSS theming
  • Works across multiple frontend frameworks and environments

Shadcn Ui by the numbers

  • 19,315 all-time installs (skills.sh)
  • +147 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #31 of 2,277 Frontend Development skills by installs in the Skillselion catalog
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill shadcn-ui

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs19.3k
repo stars★ 311
Security audit2 / 3 scanners passed
Last updatedJune 22, 2026
Repositorygiuseppe-trisciuoglio/developer-kit ↗

How do you set up shadcn/ui components in React?

Build accessible React user interfaces with pre-built shadcn-ui components.

Who is it for?

React developers adopting shadcn/ui who need accessible components, theming, and validated form patterns in-repo.

Skip if: Vue, Svelte, or Angular teams, or projects that require a hosted component CDN instead of copied source files.

When should I use this skill?

A developer asks to install shadcn/ui, build accessible forms with React Hook Form and Zod, or customize Tailwind themes for UI components.

What you get

Copied shadcn/ui component files, Tailwind theme config, and accessible form layouts with React Hook Form and Zod schemas.

  • shadcn/ui component files
  • theme configuration
  • validated form components

Files

SKILL.mdMarkdownGitHub ↗

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

ComponentInstall CommandDescription
buttonnpx shadcn@latest add buttonVariants: default, destructive, outline, secondary, ghost, link
inputnpx shadcn@latest add inputText input field
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

# 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

// 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

"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 for advanced multi-field forms, contact forms with API submission, and login card patterns.

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

// 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

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 for Line, Area, and Pie chart examples.

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

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

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kvercel-labsVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4k

Forks & variants (1)

Shadcn Ui has 1 known copy in the catalog totaling 36 installs. They canonicalize to this original listing.

FAQ

Does shadcn-ui copy components into the project?

shadcn-ui follows the shadcn/ui model where components are copied into your repository on Radix UI and Tailwind CSS, so developers own and customize every component file.

What form stack does shadcn-ui use?

shadcn-ui implements complex form layouts with React Hook Form for state management and Zod schemas for validation alongside shadcn/ui input and layout components.

Is Shadcn Ui safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentuibranding
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.