component-gen-cli

CLI to scaffold starter components for React, Vue 3, Angular, Svelte, SolidJS, and Next.js. Use JavaScript or TypeScript via a single flag.

Binaries installed from this package:

| Command | Purpose | |---------|---------| | cg | Short default (shown in docs below) | | component-gen | Same CLI, longer name |

Requirements

• Node.js ≥ 18

Install

Run once (no global install)

npx component-gen-cli@latest

Opens the built-in help and examples.

Globally

npm install -g component-gen-cli
cg --help

As a dev tool in another project

npm install --save-dev component-gen-cli
npx cg --help

Quick start

# React + TypeScript into ./src/components
npx component-gen-cli@latest generate ProductCard -f react --typescript --out ./src/components

# Same, short form
cg g ProductCard -f react --ts -o ./src/components

Run cg with no arguments to print the full help block (same examples as cg examples).

Supported frameworks

Use -f or --framework with exactly one value:

| Value | Typical output | |-------|----------------| | react | <Name>.jsx or <Name>.tsx | | vue | <Name>.vue (Vue 3 <script setup>) | | angular | <kebab>/<kebab>.component.ts plus .html and .css or .scss | | svelte | <Name>.svelte | | solid | <Name>.jsx / <Name>.tsx (JSX component) | | next | <Name>.jsx / <Name>.tsx (Next-compatible React; optional 'use client') |

Angular uses a standalone component and selector app-<kebab> (from your component name).

CLI reference

Discover commands

cg                           # Help + examples
cg frameworks                # List targets (aliases: cg fw, cg targets)
cg examples                  # Examples only (alias: cg guide)
cg generate --help           # All flags for generate (alias: cg g -h)
cg help generate
cg --version                 # Published version

generate / g

cg generate <ComponentName> -f <framework> [options]
cg g <ComponentName> -f <framework> [options]

<ComponentName> can be PascalCase (UserCard), kebab-case (user-card), or spaced words (user card). Names are normalized to PascalCase for file symbols and sensible paths.

| Option | Description | |--------|--------------| | -f, --framework <fw> | Required. react, vue, angular, svelte, solid, or next. | | -o, --out <dir> | Destination folder (default: current directory .). Parent folders are created as needed. | | --typescript, --ts | TypeScript dialect (.tsx, <script lang="ts">, etc.). Omit for plain JS where supported. Angular component class is always .ts; this flag aligns other TS-related choices where relevant. | | --scss | Angular only: use *.component.scss instead of .css. | | --client | Next.js only: insert 'use client' at top of file (client boundary). |

Examples by stack

cg g Avatar -f react --ts --out ./src/components
cg g Avatar -f react --out ./src/components

Creates Avatar.tsx or Avatar.jsx.

cg g SearchBar -f vue --ts --out ./components
cg g SearchBar -f vue --out ./components

Creates SearchBar.vue.

cg g MetricsTile -f angular --out ./src/app/widgets
cg g MetricsTile -f angular --scss --out ./src/app/widgets

Creates <kebab>/ containing *.component.ts, *.component.html, and *.component.css or *.scss.

cg g Toast -f svelte --ts --out ./lib

Creates Toast.svelte.

cg g Counter -f solid --ts --out ./src/ui

Creates Counter.tsx / Counter.jsx.

cg g Sidebar -f next --ts --out ./components
cg g Sidebar -f next --ts --client --out ./components

Creates Sidebar.tsx or Sidebar.jsx. Use --client when the scaffold uses hooks or browser-only APIs in the App Router.

Programmatic use (advanced)

Published entry is ESM src/index.js. You may import (after resolving from node_modules in your toolchain):

import { generateComponent, FRAMEWORKS } from "component-gen-cli";

Typical callers run the cg CLI instead.

How the npm readme is updated

The page at npmjs.com shows README.md from your package tarball. After you edit this file at the repo root:

1. Bump version in package.json (required for each new publish unless you unpublished).
2. Run npm publish --access public (add --otp <code> if npm asks).

Contributing & issues

Use your repository’s tracker for bugs and ideas. Pull requests improving templates or frameworks are welcome once you open a fork and keep changes focused.

License

MIT