π Official CLI for MVPBlocks - Copy, paste, customizeβand launch your idea faster than ever!
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.
create-next-app and create-vite for rock-solid projectsglobals.css, index.css, etc.)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
# 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:
create-next-app or create-vite)# In your existing React/Next.js project
npx mvpblocks add button
npx mvpblocks add hero-1 --ts
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 |
Automatically detects and uses your preferred package manager:
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)# 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
npx mvpblocks list
npx mvpblocks add button
npx mvpblocks add hero-1
npx mvpblocks search hero
npx mvpblocks search button
npx mvpblocks categories
npx mvpblocks info button
npx mvpblocks info hero-1
# Force TypeScript
npx mvpblocks add button --ts
# Force JavaScript
npx mvpblocks add button --js
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:
| 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 |
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
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
--ts, --typescript - Force TypeScript output (triggers auto-init if needed)--js, --javascript - Force JavaScript output (triggers auto-init if needed)--help, -h - Show help messageglobals.css theme integrationsrc/ directory support@tailwindcss/viteindex.css theme integrationregistry:ui) - Basic building blocks like buttons, inputs, cardsregistry:block) - Complete sections like heroes, features, testimonialsregistry:hook) - Custom React hooks for enhanced functionalityregistry:lib) - Utility functions and helpers# 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! π
# 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
# Add to my current project
cd my-existing-project
npx mvpblocks add hero-2
# β
Components added directly, no initialization needed
Want to change themes later? Re-run initialization:
npx mvpblocks add button --ts # Will detect existing project
# π¨ Theme selection will appear for theme switching
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
# Install globally for faster access
npm install -g mvpblocks
mvpblocks add hero-1 --ts # No npx needed!
Other CLIs require you to set up projects manually. MVPBlocks creates production-ready projects with a single command.
No more tweaking CSS variables manually. Choose from expertly crafted color palettes and get perfect theming instantly.
Uses create-next-app and create-vite under the hood, ensuring you get the same quality setup as manual creation.
Automatically detects and respects your preferred package manager. No configuration needed.
Every choice is optimized for modern development: TypeScript, Tailwind CSS, latest versions, best practices.
We welcome contributions! Please see our Contributing Guide for details.
Areas we'd love help with:
MIT License - see the LICENSE file for details.
Subhadeep Roy
π From zero to production-ready in seconds. That's the MVPBlocks promise.
Made with β€οΈ for developers who ship fast π
FAQs
π Official CLI for MVPBlocks - Copy, paste, customizeβand launch your idea faster than ever!
The npm package mvpblocks receives a total of 44 weekly downloads. As such, mvpblocks popularity was classified as not popular.
We found that mvpblocks demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.