nextjs-shadcn-cli

Quickstart CLI for creating Next.js projects with Tailwind CSS, shadcn/ui, and lucide-react pre-configured.

A streamlined CLI tool that scaffolds a production-ready Next.js application with a beautiful UI component library and essential developer tools.

⚠️ Note: This is a CLI tool. Don't install it globally or in your project. Use npx to run it directly (see Quick Start below).

Features

• ⚡️ Next.js 15 - Latest App Router with Server Components
• 🎨 shadcn/ui - Beautiful, accessible components built with Radix UI
• 🎯 TypeScript - Full type safety out of the box
• 💅 Tailwind CSS - Utility-first CSS framework
• 🎭 lucide-react - Beautiful icon library
• 📦 Optional packages - axios, zod, react-hook-form, and more
• 🚀 Auto-detection - Automatically detects your package manager (npm, yarn, pnpm, bun)

Quick Start

Just run this command - no installation needed:

npx create-nextjs-shadcn my-app
cd my-app
npm run dev

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

Usage

The recommended way to use this tool is with npx - it runs the latest version without installing anything:

npx create-nextjs-shadcn my-project

You can also use it without specifying a project name, and the CLI will prompt you:

npx create-nextjs-shadcn

What's Included

Base Stack

• Next.js 15 with App Router
• TypeScript for type safety
• Tailwind CSS for styling
• ESLint for code quality
• shadcn/ui with Button and Card components pre-installed
• lucide-react for icons
• clsx for conditional class names

Optional Packages

During setup, you can select additional packages:

• axios - Promise-based HTTP client
• zod - TypeScript-first schema validation
• react-hook-form - Performant form validation

Project Structure

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx    # Root layout (hydration-optimized)
│   │   ├── page.tsx      # Home page with example components
│   │   └── globals.css   # Global styles
│   └── components/
│       └── ui/           # shadcn/ui components
├── public/               # Static assets
└── package.json

What Gets Generated

The CLI creates a fully-configured Next.js project with:

1. Professional Landing Page - A modern, responsive home page showcasing:

   • Gradient hero section
   • Feature cards with icons
   • Example buttons and UI components
   • Responsive grid layout

2. Fixed Hydration Issues - Pre-configured to avoid common Next.js hydration warnings

3. Developer-Friendly Setup - All configurations done for you:

   • TypeScript paths configured (@/*)
   • Tailwind CSS configured with shadcn/ui
   • ESLint ready to use
   • Components ready to import

Requirements

• Node.js 18.17 or later
• npm, yarn, pnpm, or bun

Examples

Create a project with a specific name:

npx create-next-shadcn awesome-project

Development

To work on this CLI tool:

git clone https://github.com/your-username/create-next-shadcn-cli.git
cd create-next-shadcn-cli
npm install
npm link

Now you can run create-next-shadcn locally.

How It Works

1. Detects your package manager automatically
2. Prompts for project name and optional packages
3. Creates Next.js app with TypeScript and Tailwind
4. Installs dependencies
5. Adds shadcn/ui and configures components
6. Generates a professional starter page
7. Fixes common issues (hydration warnings)

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please file an issue on the GitHub repository.

Built with ❤️ for the Next.js community