Skip to content

README.md

Latest commit

 

History

History
254 lines (173 loc) · 6.79 KB

README.md

File metadata and controls

254 lines (173 loc) · 6.79 KB

🚀 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!

npm license downloads

✨ 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

⭐ Show your support

Give a ⭐️ if this project helped you!

🙏 Acknowledgments

Made with ❤️ by Devesh Lashkari