create-shadcn-starter

A CLI tool to quickly scaffold a React application with Vite, Tailwind CSS, and shadcn/ui components. Get started with a fully configured development environment in seconds.

Features

• 🚀 Vite for fast development and building
• 🎨 shadcn/ui components pre-configured with latest versions
• 🌙 Dark mode support out of the box
• 🎯 Tailwind CSS v4 with advanced features:
  • Container queries support (optional)
  • Typography plugin
  • Enhanced responsive design
• 📱 Modern responsive design with latest Tailwind features
• 🧭 React Router for navigation
• 📦 Zustand for state management
• ⚡️ Example components and pages included
• 🔧 connects to git
• 📦 Support for npm, yarn, pnpm, and bun package managers

Quick Start

1# Using npx
2npx create-vite-shadcn-app my-app
3
4# select one choice
5it will give option to choose from npm, yarn, pnpm, or bun selection as you like

Or specify a name for your project:

1npx create-vite-shadcn-app my-app

What's Included

• Configured project structure
• Pre-built components from shadcn/ui
• Dark mode toggle
• Example pages (Home and Dashboard)
• React Router setup
• State management with Zustand
• Tailwind CSS configuration
• Ready-to-use development environment

Project Structure

my-app/
├── src/
│   ├── components/
│   │   ├── ui/          # shadcn/ui components
│   │   └── ThemeToggle.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   └── Dashboard.jsx
│   ├── store/
│   │   └── theme.js     # Dark mode state
│   ├── lib/
│   │   └── utils.js     # Utility functions
│   ├── App.jsx
│   └── main.jsx
├── index.html
├── jsconfig.json
├── vite.config.js
├── tailwind.config.js
└── package.json

Development

After creating your project:

1cd my-app
2
3# Start the development server
4npm run dev
5# or
6yarn dev
7# or
8pnpm dev
9# or
10bun run dev

Visit http://localhost:5173 to see your application.

Available Scripts

• dev - Start the development server
• build - Build for production
• preview - Preview production build
• lint - Lint your code

Customization

Adding New Components

1. Visit shadcn/ui
2. Choose a component
3. Follow the installation instructions
4. The component will be added to your components/ui directory

Modifying Theme

Edit the CSS variables in src/index.css to customize your theme:

1:root {
2  --background: 0 0% 100%;
3  --foreground: 0 0% 3.9%;
4  /* ... other variables */
5}
6
7.dark {
8  --background: 0 0% 3.9%;
9  --foreground: 0 0% 98%;
10  /* ... other variables */
11}

Release Notes

v1.1.0 (Latest)

• Added support for Bun package manager
• Fixed container queries compatibility issue
• Made container queries an optional feature
• Improved error handling for package installation
• Updated dependencies to latest versions

v1.0.10

• Initial public release
• Support for npm, yarn, and pnpm
• Basic shadcn/ui components setup

License

MIT

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Acknowledgments

• Vite
• shadcn/ui
• Tailwind CSS
• React Router
• Zustand
• Bun

Bun Compatibility

This starter template is fully compatible with Bun, a fast JavaScript runtime and package manager. When using Bun:

• Installation is faster due to Bun's optimized package resolution
• Development server starts up quicker
• Build times are reduced

To use Bun with this template, select "bun" as your package manager during setup. If Bun is not installed, the CLI will attempt to install it for you.

Bun-specific Commands

1# Install dependencies
2bun install
3
4# Start development server
5bun run dev
6
7# Build for production
8bun run build
9
10# Preview production build
11bun run preview