https://github.com/shanujha/starter-shadcn
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.
https://github.com/shanujha/starter-shadcn
dub dubb lubba react shadcn starter vite wubba
Last synced: 5 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/shanujha/starter-shadcn
- Owner: shanujha
- Created: 2024-09-16T16:57:01.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-24T15:20:49.000Z (over 1 year ago)
- Last Synced: 2025-09-05T17:55:32.322Z (11 months ago)
- Topics: dub, dubb, lubba, react, shadcn, starter, vite, wubba
- Language: TypeScript
- Homepage:
- Size: 172 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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: