JSPM

  • Created
  • Published
  • Downloads 168
  • Score
    100M100P100Q90578F
  • License MIT

πŸš€ Official CLI for MVPBlocks - Copy, paste, customizeβ€”and launch your idea faster than ever!

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mvpblocks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    πŸš€ MVPBlocks CLI

    The official command-line interface for MVPBlocks - Copy, paste, customizeβ€”and launch your idea faster than ever!

    MVPBlocks CLI is the most intelligent component CLI that not only adds components but can automatically initialize entire projects with your preferred framework, theme, and setup.

    ✨ Revolutionary Features

    πŸͺ„ Auto-Project Initialization

    • Zero Configuration - Detects if you're in an empty directory and offers to create a project
    • Framework Choice - Choose between Next.js or Vite + React
    • Official Tools - Uses create-next-app and create-vite for rock-solid projects
    • Package Manager Respect - Automatically detects and uses your preferred package manager (npm, yarn, pnpm, bun)

    🎨 Interactive Theme Selection

    • 6 Beautiful Color Palettes - Zinc, Red, Rose, Orange, Green, Blue
    • Smart CSS Detection - Automatically finds and updates your CSS files (globals.css, index.css, etc.)
    • Instant Preview - See color swatches before making your choice
    • Tailwind Integration - Perfect CSS variables setup for light/dark themes

    πŸš€ Intelligent Component System

    • Beautiful Terminal UI - Stunning ASCII art and colorful interface
    • Smart Search - Find components by name, description, or category
    • Auto Dependencies - Automatically installs required packages
    • TypeScript & JavaScript - Support for both TS and JS projects
    • Organized Structure - Components are organized by type and category
    • Lightning Fast - Quick installation and setup

    πŸ› οΈ Installation

    You don't need to install the CLI globally. Use it directly with npx:

    npx mvpblocks --help

    OR install globally for faster access:

    npm install -g mvpblocks
    mvpblocks --help

    πŸš€ Quick Start - The Magic Way

    # Navigate to where you want your project
    mkdir my-awesome-project
    cd my-awesome-project
    
    # Run ANY command and MVPBlocks will set everything up!
    npx mvpblocks add hero-1 --ts

    What happens automatically:

    1. πŸ” Detects empty directory and offers project initialization
    2. 🎯 Choose framework: Next.js or Vite + React
    3. πŸ—οΈ Creates project using official tools (create-next-app or create-vite)
    4. πŸ“¦ Installs dependencies with your package manager
    5. 🎨 Interactive theme selection - pick from 6 beautiful color palettes
    6. πŸ”§ Sets up Tailwind CSS (v3 for Next.js, v4 for Vite)
    7. πŸ“ Creates component structure and installs your component
    8. ✨ Ready to code!

    2. Existing Projects

    # In your existing React/Next.js project
    npx mvpblocks add button
    npx mvpblocks add hero-1 --ts

    🎨 Auto-Initialization Features

    πŸ—οΈ Framework Support

    • Next.js - Full App Router setup with TypeScript, Tailwind CSS, ESLint
    • Vite + React - Lightning-fast development with Tailwind CSS v4

    🎨 Theme System

    Choose from 6 professionally designed color palettes:

    Theme Description Perfect For
    πŸ”˜ Zinc Modern neutral grays Professional dashboards, SaaS apps
    πŸ”΄ Red Bold and energetic Marketing sites, calls-to-action
    🌹 Rose Warm and welcoming E-commerce, lifestyle brands
    🟠 Orange Creative and vibrant Creative agencies, portfolios
    οΏ½ Green Fresh and natural Health, finance, eco-friendly
    πŸ”΅ Blue Trust and reliability Corporate, tech, social platforms

    πŸ“¦ Package Manager Intelligence

    Automatically detects and uses your preferred package manager:

    • npm - Default Node.js package manager
    • yarn - Fast, reliable, and secure dependency management
    • pnpm - Fast, disk space efficient package manager
    • bun - Incredibly fast JavaScript runtime and package manager

    πŸ” Smart CSS Detection

    Automatically finds and updates CSS files:

    • app/globals.css (Next.js App Router)
    • src/globals.css (Next.js with src)
    • styles/globals.css (Custom styles folder)
    • src/index.css (Vite projects)
    • src/main.css (Alternative Vite setup)

    πŸ“š Usage

    Auto-Initialization Commands

    # Start a new project with any component
    npx mvpblocks add hero-1 --ts    # Next.js or Vite with TypeScript
    npx mvpblocks add button --js    # Next.js or Vite with JavaScript
    npx mvpblocks add features       # Auto-detects language preference

    Standard Commands

    Standard Commands

    List all available components

    npx mvpblocks list

    Add a component to your project

    npx mvpblocks add button
    npx mvpblocks add hero-1

    Search for components

    npx mvpblocks search hero
    npx mvpblocks search button

    View component categories

    npx mvpblocks categories

    Get detailed component information

    npx mvpblocks info button
    npx mvpblocks info hero-1

    Force language preference

    # Force TypeScript
    npx mvpblocks add button --ts
    
    # Force JavaScript
    npx mvpblocks add button --js

    ⚑ Live Demo Workflow

    Here's what happens when you run MVPBlocks in an empty directory:

    mkdir my-project && cd my-project
    npx mvpblocks add hero-1 --ts

    Interactive Flow:

    1. πŸ” Auto-Detection: "No package.json found. Let's set up a new project!"
    2. 🎯 Framework Choice: Choose between Next.js or Vite + React
    3. 🏷️ Project Name: Enter your project name (or use current directory)
    4. πŸš€ Project Creation: Official tools create your project structure
    5. πŸ“¦ Dependency Installation: All dependencies installed automatically
    6. 🎨 Theme Selection: Interactive color palette picker
    7. πŸ”§ Theme Application: CSS variables applied to your theme file
    8. πŸ“ Component Installation: Your requested component is added
    9. ✨ Ready!: Complete project ready for development

    🎯 Commands Reference

    Command Description Auto-Init Example
    add <component> Add component (auto-initializes if needed) βœ… npx mvpblocks add hero-1 --ts
    list List all available components ❌ npx mvpblocks list
    search <query> Search for components ❌ npx mvpblocks search hero
    categories List all available categories ❌ npx mvpblocks categories
    info <component> Get detailed component information ❌ npx mvpblocks info button
    help Show help message ❌ npx mvpblocks help

    πŸ—οΈ Project Structure

    After Auto-Initialization (Next.js)

    my-awesome-project/
    β”œβ”€β”€ app/
    β”‚   β”œβ”€β”€ globals.css          # 🎨 Theme applied here
    β”‚   β”œβ”€β”€ layout.tsx
    β”‚   └── page.tsx
    β”œβ”€β”€ components/
    β”‚   β”œβ”€β”€ ui/                  # Basic UI components
    β”‚   β”‚   └── button.tsx
    β”‚   └── mvpblocks/           # Block components
    β”‚       └── hero-1.tsx
    β”œβ”€β”€ lib/
    β”‚   └── utils.ts             # Utility functions
    β”œβ”€β”€ package.json             # πŸ“¦ All dependencies
    β”œβ”€β”€ tailwind.config.ts       # 🎨 Tailwind setup
    └── tsconfig.json           # TypeScript config

    After Auto-Initialization (Vite)

    my-awesome-project/
    β”œβ”€β”€ src/
    β”‚   β”œβ”€β”€ index.css           # 🎨 Theme applied here
    β”‚   β”œβ”€β”€ App.tsx
    β”‚   └── main.tsx
    β”œβ”€β”€ components/
    β”‚   β”œβ”€β”€ ui/                 # Basic UI components
    β”‚   β”‚   └── button.tsx
    β”‚   └── mvpblocks/          # Block components
    β”‚       └── hero-1.tsx
    β”œβ”€β”€ lib/
    β”‚   └── utils.ts            # Utility functions
    β”œβ”€β”€ package.json            # πŸ“¦ All dependencies
    β”œβ”€β”€ vite.config.ts          # ⚑ Vite + Tailwind CSS v4
    └── tsconfig.json          # TypeScript config

    πŸ”§ Options & Flags

    • --ts, --typescript - Force TypeScript output (triggers auto-init if needed)
    • --js, --javascript - Force JavaScript output (triggers auto-init if needed)
    • --help, -h - Show help message

    πŸ“‹ Requirements

    • Node.js 18 or higher
    • Package Manager: npm, yarn, pnpm, or bun (auto-detected)
    • No existing setup needed - MVPBlocks creates everything for you!

    🎨 Supported Frameworks & Setups

    Next.js (Auto-Initialized)

    • βœ… App Router with TypeScript
    • βœ… Tailwind CSS v3
    • βœ… ESLint configuration
    • βœ… Automatic globals.css theme integration
    • βœ… Optional src/ directory support

    Vite + React (Auto-Initialized)

    • βœ… React with TypeScript/JavaScript
    • βœ… Tailwind CSS v4 with @tailwindcss/vite
    • βœ… Automatic index.css theme integration
    • βœ… Lightning-fast development server

    Existing Projects (Manual)

    • βœ… Any React/Next.js project with Tailwind CSS
    • βœ… Components added to existing structure
    • βœ… Dependencies auto-installed

    🎨 Component Types

    • UI Components (registry:ui) - Basic building blocks like buttons, inputs, cards
    • Block Components (registry:block) - Complete sections like heroes, features, testimonials
    • Hooks (registry:hook) - Custom React hooks for enhanced functionality
    • Library (registry:lib) - Utility functions and helpers

    πŸš€ Example Workflows

    Scenario 1: Complete Beginner

    # I want to build a landing page
    mkdir my-landing-page
    cd my-landing-page
    npx mvpblocks add hero-1 --ts
    # 🎯 Choose Next.js β†’ Enter project name β†’ Pick theme β†’ Done!
    npx mvpblocks add features
    npx mvpblocks add testimonials  
    npx mvpblocks add cta-1
    # Perfect landing page ready! πŸš€

    Scenario 2: Experienced Developer

    # I have specific preferences
    mkdir my-saas-app
    cd my-saas-app
    npx mvpblocks add dashboard --ts
    # 🎯 Choose Vite β†’ Modern setup β†’ Blue theme β†’ Ready!
    npx mvpblocks add button
    npx mvpblocks add modal
    # Components added to existing structure

    Scenario 3: Existing Project

    # Add to my current project  
    cd my-existing-project
    npx mvpblocks add hero-2
    # βœ… Components added directly, no initialization needed

    πŸ’‘ Pro Tips

    🎨 Theme Switching

    Want to change themes later? Re-run initialization:

    npx mvpblocks add button --ts  # Will detect existing project
    # 🎨 Theme selection will appear for theme switching

    πŸ“¦ Package Manager Preference

    MVPBlocks respects your package manager:

    # Will use yarn for everything if yarn.lock exists
    yarn create vite my-app
    cd my-app  
    npx mvpblocks add hero-1  # Uses yarn automatically

    πŸš€ Speed Tips

    # Install globally for faster access
    npm install -g mvpblocks
    mvpblocks add hero-1 --ts  # No npx needed!

    πŸŽ‰ What Makes MVPBlocks Special?

    πŸͺ„ Zero Configuration Magic

    Other CLIs require you to set up projects manually. MVPBlocks creates production-ready projects with a single command.

    🎨 Professional Theme System

    No more tweaking CSS variables manually. Choose from expertly crafted color palettes and get perfect theming instantly.

    πŸš€ Official Tools Integration

    Uses create-next-app and create-vite under the hood, ensuring you get the same quality setup as manual creation.

    πŸ“¦ Package Manager Intelligence

    Automatically detects and respects your preferred package manager. No configuration needed.

    🎯 Smart Defaults

    Every choice is optimized for modern development: TypeScript, Tailwind CSS, latest versions, best practices.

    🀝 Contributing

    We welcome contributions! Please see our Contributing Guide for details.

    Areas we'd love help with:

    • πŸ†• New component designs
    • πŸ› Bug fixes and improvements
    • πŸ“– Documentation enhancements
    • πŸ§ͺ Testing and quality assurance

    πŸ“ License

    MIT License - see the LICENSE file for details.

    πŸ‘¨β€πŸ’» Author

    Subhadeep Roy


    πŸš€ From zero to production-ready in seconds. That's the MVPBlocks promise.

    Made with ❀️ for developers who ship fast 🌟