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
andcreate-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
1. Start from Scratch (Recommended)
# 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:
- π Detects empty directory and offers project initialization
- π― Choose framework: Next.js or Vite + React
- ποΈ Creates project using official tools (
create-next-app
orcreate-vite
) - π¦ Installs dependencies with your package manager
- π¨ Interactive theme selection - pick from 6 beautiful color palettes
- π§ Sets up Tailwind CSS (v3 for Next.js, v4 for Vite)
- π Creates component structure and installs your component
- β¨ 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:
- π Auto-Detection: "No package.json found. Let's set up a new project!"
- π― Framework Choice: Choose between Next.js or Vite + React
- π·οΈ Project Name: Enter your project name (or use current directory)
- π Project Creation: Official tools create your project structure
- π¦ Dependency Installation: All dependencies installed automatically
- π¨ Theme Selection: Interactive color palette picker
- π§ Theme Application: CSS variables applied to your theme file
- π Component Installation: Your requested component is added
- β¨ 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!
π Links
- π Website: https://blocks.mvp-subha.me
- π Documentation: https://blocks.mvp-subha.me/docs
- π¦ NPM Package: https://www.npmjs.com/package/mvpblocks
- π» GitHub: https://github.com/subhadeeproy3902/mvpblocks
- π¦ Twitter: @mvp_Subha
π 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
- GitHub: @subhadeeproy3902
- Twitter: @mvp_Subha
π From zero to production-ready in seconds. That's the MVPBlocks promise.
Made with β€οΈ for developers who ship fast π