Shadcn React Vite Starter

This project is a starter template for building React applications using Vite and Shadcn UI components. It provides a solid foundation for quickly developing modern, responsive web applications.

Do you like IntelliSense for path aliases with Tailwind? This project does it brilliantly and supports Windows, Mac, and Linux! As the creator, I've tried many other starters and even the official Shadcn installation guide for Vite, but none of them provided proper IntelliSense for path aliases. This project, however, does it flawlessly. I'm not entirely sure why it works, but it does!

Getting Started

1. Clone the repository
2. Install dependencies: npm install or yarn install
3. Start the development server: npm run dev or yarn dev
4. Open your browser and navigate to http://localhost:5173

Features

• React 18
• Vite for fast development and building
• Shadcn UI components for a sleek, customizable UI
• TypeScript support
• Tailwind CSS for utility-first styling

Included Components and Utilities

This starter project comes pre-configured with several Shadcn UI components and utilities:

Components

• Button
• Card
• Dialog
• Dropdown Menu
• Input
• Label
• Tabs
• Toast

Blocks

• Form with validation (using react-hook-form and zod)
• Header with responsive navigation

Utils

• cn utility for conditional className merging
• useToast hook for displaying toast notifications

Libraries

• @radix-ui/react-icons for a comprehensive icon set
• lucide-react for a comprehensive icon set
• class-variance-authority for creating flexible component variants
• clsx for constructing className strings conditionally
• tailwind-merge for merging Tailwind CSS classes

Customization

You can easily customize the appearance of your application by modifying the tailwind.config.js file. The Shadcn UI components are fully customizable and can be adjusted to fit your project's design requirements.

Adding New Components

To add more Shadcn UI components to your project, use the Shadcn CLI: