React + Vite + TypeScript + Tailwind CSS + ShadCN UI

A modern React project setup with a complete UI component system.

Features

• ⚡ Vite - Fast build tool and development server
• ⚛️ React 19 - Latest React with TypeScript support
• 🎨 Tailwind CSS - Utility-first CSS framework
• 🧩 ShadCN UI - High-quality, accessible component system
• 📦 Class Variance Authority - Component variant management
• 🔧 ESLint - Code linting and formatting

Getting Started

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn

Installation

1. Clone the repository
2. Install dependencies:

   npm install

Development

Start the development server:

npm run dev

Open http://localhost:5173 to view the application in your browser.

Building for Production

Build the project for production:

npm run build

Preview the production build:

npm run preview

Project Structure

src/
├── components/
│   └── ui/
│       └── button.tsx        # ShadCN Button component
├── lib/
│   └── utils.ts              # Utility functions (cn helper)
├── App.tsx                   # Main application component
├── main.tsx                  # Application entry point
└── index.css                 # Global styles with Tailwind directives

Components

The project includes a custom Button component built with ShadCN UI principles:

• Multiple variants: default, outline, secondary, ghost, destructive
• Different sizes: default, sm, lg, icon
• Full TypeScript support
• Accessible and keyboard navigable

Technologies Used

• React 19 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Tailwind CSS - Styling
• ShadCN UI - Component architecture
• Class Variance Authority - Component variants
• clsx & tailwind-merge - Conditional class names

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build