skills.rest
TranVanTienDat
TranVanTienDatCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-ui

Implements accessible React UI components using shadcn/ui, Radix UI, and Tailwind CSS.

Updated Mar 26, 2026
Search Tags:#react#zod#tailwind css#ui components#shadcn#form validation#radix ui
One-click install
npx skills add https://github.com/TranVanTienDat/Milkyway --skill shadcn-ui-tranvantiendat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-ui
Source: https://github.com/TranVanTienDat/Milkyway/tree/main/apps/storefront/.agents/skills/shadcn-ui
Command: npx skills add https://github.com/TranVanTienDat/Milkyway --skill shadcn-ui-tranvantiendat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building accessible, themeable React interfaces from scratch requires wiring together Radix UI primitives, Tailwind styling, form validation, and charting libraries, which is repetitive and error-prone. This Skill provides complete shadcn/ui patterns for installing, configuring, and composing components so you can ship consistent UI faster. ## Core Features & Use Cases - Component Installation & Setup: Initialize shadcn/ui in Next.js, Remix, or TanStack projects and add components like Button, Dialog, Sheet, Table, and Toast via the CLI. - Forms with Validation: Build type-safe forms using React Hook Form and Zod schemas, including login cards, contact forms with API submission, and multi-field layouts. - Theming & Customization: Configure CSS variables, dark mode with next-themes, custom button variants with CVA, and the cn() utility. - Data Visualization: Create Bar, Line, Area, and Pie charts with ChartContainer and Recharts theming. - Use Case: When asked to build a login page, this Skill produces a Card containing a Zod-validated form with proper FormField structure, error messages, and a submit handler. ## Quick Start Set up shadcn/ui in my Next.js project and build a login form with email and password validation.

Frequently Asked Questions about shadcn-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install shadcn/ui components in a Next.js project?▼

Run npx shadcn@latest init to configure the project, then add components with npx shadcn@latest add followed by the component name, such as button or dialog. Components are copied into your components/ui directory rather than installed as a package.

How do I build a form with shadcn/ui and Zod validation?▼

Install the form component plus react-hook-form, @hookform/resolvers, and zod. Define a Zod schema, create the form with useForm and zodResolver, then wrap fields in Form, FormField, FormItem, FormLabel, FormControl, and FormMessage components.

Does shadcn/ui work with Next.js App Router and Server Components?▼

Yes, but interactive components require the "use client" directive since they use hooks and event handlers. Static components like Card can render in Server Components, and interactive ones can be wrapped in client component wrappers.

How do I set up dark mode with shadcn/ui?▼

Install next-themes, create a ThemeProvider client component, and wrap your root layout with it using attribute="class". Define dark mode CSS variables under the .dark selector in globals.css, then add a toggle button that calls setTheme.

Is shadcn/ui an npm package dependency?▼

No, shadcn/ui is not a versioned npm dependency. The CLI copies component source code directly into your project, so you own and can modify the code. This means updates are not automatic and you should review code fetched from registries.

Why do shadcn/ui imports fail with module not found errors?▼

Import failures usually come from a missing @ path alias in tsconfig.json or absent Radix UI dependencies. Verify the alias configuration in tsconfig.json and components.json, and ensure required @radix-ui packages and Tailwind CSS are installed.

Related Skills

Explore More Software Engineering Skills→
shep-aishep-ai
241

shadcn-ui

Automate shadcn/ui component setup and usage in React projects.

Official
Intermediate
aryan083aryan083
1

express-serverless-api

Build, test, and deploy Express.js REST APIs with MongoDB on Vercel.

Community
Advanced
leonanpereirapintoleonanpereirapinto
1

a11y-testing

Automate WCAG accessibility checks with jest-axe and Playwright axe-core.

Community
Advanced
aashahinaashahin

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Community
Intermediate