Shadcn Ui
Initialize shadcn/ui, add accessible Radix-based components, and build validated forms with React Hook Form, Zod, and Tailwind theming.
Overview
shadcn-ui is an agent skill for the Build phase that installs and implements accessible shadcn/ui components with Tailwind, Radix UI, React Hook Form, and Zod.
Install
npx skills add https://github.com/giuseppe-trisciuoglio/developer-kit --skill shadcn-uiWhat is this skill?
- Components copied into the repo—you own and customize every file
- CLI installs via npx shadcn@latest add for buttons, dialogs, forms, tables, charts, and more
- Radix UI primitives for accessibility plus Tailwind CSS variables for theming and dark mode
- Form patterns with React Hook Form and Zod validation
- Recharts-based chart components when analytics UI is needed
Adoption & trust: 18k installs on skills.sh; 271 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a cohesive, accessible React UI fast but copying random component snippets leaves inconsistent themes, forms, and Radix behavior.
Who is it for?
Indie SaaS or content sites on React/Next that standardize on shadcn/ui, Tailwind, and Zod-backed forms from day one of UI build-out.
Skip if: Teams standardizing on MUI, Chakra, or pure headless custom design systems with no intent to copy shadcn components into the project.
When should I use this skill?
User mentions set up shadcn/ui, initialize shadcn, add shadcn components, React Hook Form, Zod validation, accessible Radix UI, Tailwind theme, dark mode, or named shadcn components (button, dialog, sheet, table, chart).
What do I get? / Deliverables
You get initialized shadcn/ui config, CLI-added components in your repo, and form and theme patterns you can customize for your solo product’s screens.
- shadcn/ui project configuration
- Installed component source files
- Form and theme implementation patterns
Recommended Skills
Journey fit
UI library setup and component implementation are foundational Build tasks before you ship or market the product. Frontend is the correct shelf for shadcn CLI installs, Tailwind themes, and compound components like dialogs, tables, and charts.
How it compares
Component scaffold and pattern skill for copy-in UI—not a hosted design tool or a backend API integration skill.
Common Questions / FAQ
Who is shadcn-ui for?
Solo and indie frontend builders using agent-assisted coding who want shadcn/ui’s copy-owned components with accessible Radix primitives and Tailwind theming.
When should I use shadcn-ui?
During Build/frontend when setting up shadcn, adding specific components, theming for dark mode, or building validated forms and data tables for your app shell.
Is shadcn-ui safe to install?
It runs CLI and file edits in your repo; review the Security Audits panel on this page and audit npx shadcn commands and generated files before committing.
SKILL.md
READMESKILL.md - Shadcn Ui
# 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">