shadcn-ui
shadcn-ui guides you through initializing the component library, installing individual components via CLI, and building forms with validation. It covers button variants, dialogs, tables, toasts, and charts styled with Tailwind CSS and CSS variables for custom theming.
shadcn-ui helps you set up and initialize the shadcn/ui component library in React or Next.js projects with CLI-based installation.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-22
shadcn-ui helps you set up and initialize the shadcn/ui component library in React or Next.js projects with CLI-based installation. shadcn-ui guides you through initializing the component library, installing individual components via CLI, and building forms with validation. It covers button variants, dialogs, tables, toasts, and charts styled with Tailwind CSS and CSS variables for custom theming.
Use it when
- shadcn-ui offers a comprehensive library including buttons, dialogs, forms, tables, toasts, selects, checkboxes, sheets, and charts.
- shadcn-ui integrates seamlessly with React Hook Form and Zod for robust form handling.
Verify before relying
Read SKILL.md below before installing (12 files). Open directory: indexed for reading, not audited.
Install
giuseppe-trisciuoglio/developer-kit/shadcn-ui · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How to set up shadcn-ui in a React or Next.js project?
shadcn-ui initializes through a CLI-driven setup process. Run `npx shadcn-ui@latest init` to configure your project with Tailwind CSS and required dependencies. shadcn-ui will prompt you to choose your framework (React or Next.js), style preferences, and base color. Once initialized, you can install individual components on demand using `npx shadcn-ui@latest add [component-name]`. shadcn-ui copies component source code directly into your project, giving you full control over styling and behavior.
What components does shadcn-ui provide and how do you install them?
shadcn-ui offers a comprehensive library including buttons, dialogs, forms, tables, toasts, selects, checkboxes, sheets, and charts. Install specific shadcn components via CLI: `npx shadcn-ui@latest add button` or `npx shadcn-ui@latest add dialog`. Each component is built on Radix UI primitives for accessibility and styled with Tailwind CSS. shadcn-ui copies the component code into your project's components directory, allowing you to customize styling and behavior without vendor lock-in.
How do you build forms with React Hook Form and Zod validation in shadcn-ui?
shadcn-ui integrates seamlessly with React Hook Form and Zod for robust form handling. Define a Zod schema for validation, then use `useForm` from React Hook Form with `zodResolver`. Combine shadcn-ui form components (Form, FormField, FormControl, FormMessage) with your schema to automatically handle validation errors and field state. shadcn-ui's form wrapper abstracts Radix UI primitives, making it simple to build accessible forms with real-time validation feedback.
Can you customize shadcn-ui component themes and styling with Tailwind CSS?
shadcn-ui uses Tailwind CSS variables for theming, enabling light and dark mode support. Customize colors, spacing, and other design tokens by editing the CSS variables in your `globals.css` or theme configuration. shadcn-ui components reference these variables, so updating them automatically applies changes across all components. You can also modify individual component styles by editing the source files in your project, since shadcn-ui copies code rather than importing from a package.
What accessibility features does shadcn-ui provide for interactive UI patterns?
shadcn-ui builds on Radix UI primitives, which implement WAI-ARIA standards for keyboard navigation, screen reader support, and focus management. Components like dialogs, dropdowns, and tables include built-in accessibility attributes. shadcn-ui ensures interactive patterns follow best practices for semantic HTML and ARIA roles. All shadcn-ui components are tested for accessibility compliance, making it straightforward to create inclusive, interactive layouts without additional accessibility work.
How do you set up dark mode and customize themes in shadcn-ui?
shadcn-ui supports dark mode through CSS variables defined in your global stylesheet. The init process configures light and dark color palettes. Toggle dark mode by adding the `dark` class to your root element, and shadcn-ui automatically applies the corresponding CSS variable values. Customize the theme by editing variables in `globals.css`—shadcn-ui reads these values to style all components. This approach works with Next.js and React, providing seamless theme switching without additional libraries.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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",
(truncated - see the full file via the links below)
File tree — 12 files
plugins/developer-kit-typescript/skills/shadcn-ui/SKILL.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/chart.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/charts-components.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/customization.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/forms-and-validation.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/learn.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/nextjs-integration.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/official-ui-reference.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/reference.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/setup-and-configuration.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/ui-components.md
plugins/developer-kit-typescript/skills/shadcn-ui/references/ui-reference.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up and initialize shadcn/ui in a React or Next.js project”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Shadcn Ui Expert helps you design and implement accessible React components using shadcn-ui, Tailwind CSS, and Radix UI. Get guidance on component selection, customization, and best practices across forms, layouts, dialogs, tables, and data displays. Works with Next.js, Vite, Remix, Astro, and other frameworks.
Shadcn provides copy-paste React components you own and control, built atop Radix UI for accessibility and styled with Tailwind CSS. Customize components freely while respecting design tokens for theme switching and preserving built-in accessibility features.
Shadcn Ui is a code generation platform that lets you copy component source directly into your project, giving you full ownership and customization. It combines Radix UI or Base UI primitives with Tailwind CSS 4, oklch theming, and React 19 patterns for building accessible interfaces. Use it to add components via CLI, configure dark mode, validate forms with Zod, or create custom component registries.
Frontend Patterns provides standardized approaches for constructing UI components, pages, authentication flows, and analytics integration across modern web frameworks. It covers server and client component distinctions, protected route implementation, form handling with validation, and accessibility requirements to maintain consistency throughout your project.
This skill guides you through initializing shadcn/ui, installing individual components, and configuring your project with Radix UI primitives and Tailwind CSS. Learn to build forms with validation, customize themes, and implement production-ready accessible components you own and control.
Build consistent UIs across full-stack Next.js/NestJS applications using this design system reference. It covers theme configuration, shadcn/ui component patterns, CSS variables, dark mode setup with next-themes, and visual effects like glassmorphism. Extends the generic design system foundation for colors, typography, and spacing.
More skills shadcn (MIT) · Shadcn (unlicensed) · shadcn (MIT) · Shadcn Skills (unlicensed) · Shadcn (NOASSERTION) · shadcn-inertia (MIT) · shadcn-vue-inertia (MIT) · React Artifacts (unlicensed)