shadcn-ui

The shadcn/ui skill provides an automated workflow for developers integrating the shadcn/ui component library into modern web applications. Designed for rapid, AI-assisted development, this skill handles the complexities of component distribution, configuration, and styling. It streamlines the adoption of accessible, pre-designed UI primitives built on top of Tailwind CSS and Radix UI. Whether you are scaffolding a new project or augmenting an existing one, this skill ensures your environment is correctly configured for local component management.

• Automated CLI integration using npx shadcn@latest for component lifecycle management including init, add, and diff commands.

• Deep support for Vite, TanStack Router, and TanStack Start environments with step-by-step guidance for path aliases and TypeScript configuration.

• Standardized components.json management, ensuring correct setup of design tokens, CSS variables, and folder structures.

• Seamless Tailwind CSS configuration and integration, including Tailwind v4 support and custom style modifications.

• Manual installation alternatives for non-standard environments, covering dependencies like class-variance-authority, clsx, and lucide-react.

• Ensure your project has tailwindcss configured correctly before triggering component additions to avoid styling conflicts.

• Use the CLI commands provided to maintain a clean codebase; note that shadcn/ui promotes copying component code directly into your project rather than traditional npm package installation.

• When working with TanStack Router, utilize the recommended project templates to ensure pre-configured path aliases for components and hooks.

• Regularly run the diff command to reconcile your local component versions with the latest registry updates, maintaining consistency without overriding custom logic.

• The skill assumes a TypeScript-first workflow and requires functional knowledge of React component composition and Tailwind utility classes.