🚀 React Starter CLI Kit

A powerful and interactive CLI tool to quickly bootstrap React, Vite, or Next.js projects with your preferred CSS frameworks and optional packages. Skip the tedious setup and get straight to coding!

✨ Features

• 🎯 Multiple Framework Support: Choose from React (CRA), Vite, or Next.js
• 🎨 CSS Framework Integration: Tailwind CSS, MUI, shadcn/ui, Bootstrap React, or none
• 📦 Popular Packages: Pre-configured optional packages like Axios, Zod, React Hook Form, and more
• 🛠️ Package Manager Choice: Support for npm, yarn, and pnpm
• ⚡ TypeScript Ready: Option to use TypeScript in all frameworks
• 🚫 No Hanging: Robust error handling and timeout protection
• 🎨 Beautiful CLI: Colorful and interactive prompts with loading spinners

🚀 Quick Start

Install and Use

npx react-starter-cli-kit

That's it! The CLI will guide you through the setup process.

Global Installation (Optional)

npm install -g react-starter-cli-kit
react-starter-cli-kit

🎯 Supported Frameworks

| Framework | Template | TypeScript Support | | --------------- | ---------------- | ------------------ | | React (CRA) | create-react-app | ✅ | | Vite | react-ts / react | ✅ | | Next.js | App Router | ✅ |

🎨 Supported CSS Frameworks

| CSS Framework | Description | Auto-configured | | ------------------- | ----------------------------------------------------- | --------------- | | Tailwind CSS | Utility-first CSS framework | ✅ | | MUI | React component library | ✅ | | shadcn/ui | Re-usable components built with Radix UI and Tailwind | ✅ | | Bootstrap React | Bootstrap components for React | ✅ | | None | Skip CSS framework setup | - |

📦 Optional Packages

Choose from a curated list of popular React packages:

HTTP & API

• axios - Promise-based HTTP client
• react-query/tanstack-query - Data fetching and caching

Form Handling

• react-hook-form - Performant forms with easy validation
• formik - Form library with validation

Validation

• zod - TypeScript-first schema validation
• yup - Schema validation library

Date & Time

• moment - Date manipulation library
• dayjs - Lightweight date library

Icons & UI

• lucide-react - Beautiful & consistent icons
• react-icons - Popular icon libraries for React
• framer-motion - Motion library for React

🛠️ Usage Example

npx react-starter-cli-kit

Follow the interactive prompts:

1. Enter project name: my-awesome-app
2. Select framework: next
3. TypeScript: Yes
4. CSS framework: tailwind
5. Optional packages: axios, zod, react-hook-form
6. Package manager: npm

The CLI will:

• Create the project with your chosen framework
• Set up the CSS framework with proper configuration
• Install selected optional packages
• Initialize git repository
• Provide next steps to run your project

🏗️ Project Structure

After running the CLI, your project will have:

my-app/
├── src/
├── public/
├── package.json
├── tailwind.config.js    # If Tailwind is selected
├── components.json       # If shadcn/ui is selected
└── ... (framework-specific files)

🎯 Framework-Specific Features

Vite Projects

• Uses @tailwindcss/vite plugin for optimal Tailwind integration
• Fast development server and build times
• Modern build tooling

Next.js Projects

• App Router by default
• Optimized for production
• Built-in TypeScript support
• Custom shadcn/ui configuration for Next.js

React (CRA) Projects

• Battle-tested setup
• Comprehensive tooling
• Easy to eject if needed

🤝 Contributing

We welcome contributions! Here's how you can help:

Development Setup

1. Clone the repository

   git clone https://github.com/deveshlashkari/react-starter-cli.git
   cd react-starter-cli

2. Install dependencies

   npm install

3. Build the project

   npm run build

4. Test locally

   npm start
   # or link globally
   npm link
   react-starter-cli

Adding New Features

• New Framework: Add support in src/lib/framework.ts
• CSS Framework: Add configuration in src/lib/css.ts
• Optional Packages: Update the choices in src/cli.ts and add installation logic in src/lib/packages.ts

Submitting Changes

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

📋 Requirements

• Node.js 16+
• npm, yarn, or pnpm

🐛 Troubleshooting

Command Not Found

If you get "command not found" error:

npm install -g react-starter-cli-kit

Permission Issues

On macOS/Linux, you might need:

sudo npm install -g react-starter-cli-kit

Timeout Issues

The CLI includes 2-minute timeouts for framework installations. If you're on a slow connection, the process might timeout. Simply run the command again.

📝 Changelog

v1.0.0

• Initial release
• Support for React, Vite, and Next.js
• CSS framework integration (Tailwind, MUI, shadcn/ui, Bootstrap)
• Optional package installation
• Interactive CLI with beautiful prompts

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Devesh Lashkari

• GitHub: @deveshlashkari
• LinkedIn: deveshlashkari

⭐ Show your support

Give a ⭐️ if this project helped you!

🙏 Acknowledgments

• Create React App team
• Vite team
• Next.js team
• Tailwind CSS team
• shadcn/ui creator
• GitHub Copilot for AI-powered development assistance
• Visual Studio Code for being an amazing development environment
• All the amazing package maintainers