KPM CLI

KPM is a smart CLI tool for developers to quickly bootstrap React and Next.js projects with modern best practices. It helps you set up frontend, optional backend, UI libraries, and project templates in seconds, without worrying about repetitive configuration.

Features

• Frameworks: React or Next.js
• TypeScript support: Optional for strict typing
• UI Libraries: Hiro UI, Material UI, Chakra UI, or No UI Library
• Project templates: Blog, Ecommerce, Portfolio, or Blank
• Component & Page Generators: Quickly scaffold reusable components and pages
• Smart Library Installer: Suggests popular frontend/backend libraries and remembers custom ones
• Docker Support: Ready-to-run docker-compose setup for frontend + backend
• Multilingual prompts: Easily add new languages for CLI interactions

Installation

Install KPM globally:

npm install -g kpm

Check the version:

kpm --version

CLI Commands

kpm init

Initializes a new project interactively.

kpm init

• Prompts for:

  • Project name
  • Framework (React / Next.js)
  • TypeScript support
  • UI library
  • Project template
  • Optional backend setup

• Automatically sets up:

  • Frontend project folder
  • TailwindCSS + selected UI library
  • Optional Node.js backend with TypeScript
  • Docker Compose for full-stack development

Example:

kpm init
? Project name: my-awesome-app
? Framework: Next.js
? Use TypeScript? Yes
? Choose UI Library: Chakra UI
? Template: Blog
? Include backend? Yes

kpm add component

Generates a new component in your project.

kpm add component

• Detects project structure automatically:

  • app/components/ for app-based Next.js
  • src/components/ otherwise

• Prompts for:

  • Component name
  • TypeScript or JavaScript

• Creates the component folder and files ready for use.

Example:

kpm add component
? Component name: HeroBanner
? Use TypeScript? Yes
✅ Component "HeroBanner" created at src/components/HeroBanner/

kpm add page

Generates a new page.

kpm add page

• Detects project structure automatically:

  • app/pages/ for app-based Next.js
  • src/pages/ otherwise

• Prompts for:

  • Page name
  • TypeScript or JavaScript

Example:

kpm add page
? Page name: About
? Use TypeScript? No
✅ Page "About" created at src/pages/About/

kpm add library

Installs a frontend or backend library smartly.

kpm add library

• Detects whether you are in frontend or backend folder.
• Suggests popular libraries or lets you input a custom one.
• Automatically installs it using npm/yarn/pnpm.
• Remembers new libraries for future suggestions.

Example:

kpm add library
? Select a library to install in frontend (or choose New Library): react-router
⬇ Installing "react-router" in frontend...
✅ "react-router" installed successfully.

kpm add library
? Select a library to install in backend (or choose New Library): New Library
? Enter the npm library name: prisma
⬇ Installing "prisma" in backend...
✅ "prisma" added to the backend library list and installed.

Docker Setup

If you include a backend, KPM generates a docker-compose.yml:

version: "3.8"
services:
  frontend:
    build: .
    ports:
      - "3000:3000"
    command: "npm run dev"
    volumes:
      - .:/app
    working_dir: /app

  backend:
    build: ./backend
    ports:
      - "4000:4000"
    command: "npm run dev"
    volumes:
      - ./backend:/app
    working_dir: /app

Run both frontend and backend with:

docker-compose up

Tips & Tricks

• Use kpm add component and kpm add page to keep your code organized.
• Use kpm add library to manage both frontend and backend dependencies in one place.
• Combine Docker with kpm init to start full-stack development instantly.
• You can customize templates and languages by editing the /templates folder and /lib/language.json.

License

MIT