Guide React and TypeScript projects integrating shadcn/ui components with Tailwind CSS.
npx skills add https://github.com/blencorp/claude-code-kit --skill shadcn
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/blencorp/claude-code-kit/tree/main/cli/kits/shadcn/skills/shadcn Command: npx skills add https://github.com/blencorp/claude-code-kit --skill shadcn
This Skill provides best practices and patterns for using the shadcn/ui component library with Tailwind CSS and Radix UI. It simplifies UI development by offering guidance on component usage, customization, and theming, enabling you to build accessible and visually appealing interfaces quickly.
react-hook-form and Zod validation, ensuring data integrity and user-friendly input.react-hook-form for state management, and applying Zod for validation, ensuring a polished and functional form.Use the shadcn skill to add a new button component with a custom variant.
High-intent search queries and answers about installing and using this skill.
Build accessible React forms using shadcn/ui components paired with react-hook-form for state management and Zod for validation. shadcn/ui provides ARIA-compliant form elements built on Radix UI primitives, ensuring keyboard navigation and screen reader support while Tailwind CSS handles styling.
Yes, shadcn/ui components are copied directly into your project as TypeScript code, allowing full customization without npm dependencies. You modify components in-place, add custom variants, and adapt styling via Tailwind CSS classes to match your design system.
Implement dark mode using next-themes for theme management and OKLCH color format in your Tailwind configuration. shadcn/ui components automatically adapt to theme changes, enabling seamless light and dark mode switching without additional component modifications.
shadcn/ui provides type-safe UI components including Buttons, Cards, Dialogs, Forms, and Tables built on Radix UI primitives. Each component is fully typed in TypeScript, supports composition and customization, and integrates with Tailwind CSS for styling.
No, shadcn/ui components are copied directly into your project instead of installed as dependencies. This approach gives you complete control over component code, enabling customization and ensuring TypeScript type safety without external package management.
Use shadcn/ui forms when you need production-ready, accessible form patterns with built-in validation support. They integrate react-hook-form and Zod, handle ARIA attributes, and provide pre-built components like inputs and selects, saving development time while maintaining accessibility standards.
Mischio95Set up shadcn/ui components and forms with React Hook Form and Zod.
puzzo-devProvide Vue 3 components and data-fetching utilities for Frappe apps.
JoseLopezGonzalezImplement shadcn/ui, Radix UI, and Tailwind CSS components in React applications.
aehrcGuide building accessible React UIs with Radix Themes and Radix Primitives.