shadcn-vite-integration

Set up shadcn/ui in Vite by installing dependencies, configuring Tailwind CSS and PostCSS, creating components.json with proper path aliases, and generating base primitives like Button and Input. This Skill automates the entire process from scratch, aligning your project structure with src/components/ui and src/lib conventions.

Yes, shadcn/ui works with Vite + React + TypeScript projects. This Skill handles the non-Next.js setup, configuring Tailwind CSS, theming, and component organization so you get the same design system benefits without Next.js scaffolding.

shadcn/ui with Tailwind requires PostCSS configuration, Tailwind CSS setup with theming tokens (colors, radius, dark mode), and a components.json file pointing to your component and utility directories. This Skill sets up all three automatically to ensure compatibility.

Organize shadcn components in src/components/ui for primitives (Button, Input, Card, Label) and src/lib for utilities like cn(). This Skill generates the correct structure and import aliases so your codebase follows shadcn best practices from the start.

Yes, this Skill handles migration of existing Vite + React + TypeScript projects, installing shadcn dependencies, configuring Tailwind and theming, and refactoring your components to use shadcn primitives without disrupting your current setup.

shadcn/ui is fully typed for TypeScript. This Skill configures your Vite + TypeScript project with proper component typing, path aliases, and import resolution so you get IDE autocomplete and type safety across all shadcn primitives.