create-new-react-component

React component generator

Create multiple React components from one command.

Batch scaffold JavaScript or TypeScript React component folders with matching index files, optional CSS Modules or SCSS Modules, project defaults, custom templates, test files, and project-aware Prettier formatting.

Install View on npm 
$ create-new-react-component
? What are the names of your components? ProductCard UserCard
? What type of component would you like to create?
Arrow Function
? What language would you like to use? ts
? What styling solution would you like to use? scss

ProductCard/
  index.ts
  ProductCard.tsx
  ProductCard.module.scss
  ProductCard.test.tsx

UserCard/
  index.ts
  UserCard.tsx
  UserCard.module.scss
  UserCard.test.tsx
5 component templates
2 language targets
Tests optional generated test files

Install

Use it globally or add it to a project.

The CLI starts with an interactive prompt, validates PascalCase component names, and writes a component directory in your current working folder or a target directory. 

npx create-new-react-component Button UserCard Modal

create-new-react-component Button UserCard --lang ts --style scss --with-test --format

Use cases

A focused scaffold for repeated React component work.

Use create-new-react-component when you want repeatable folder output without introducing a full app framework, build tool, or design system dependency.

TypeScript component scaffold

Create .tsx components, index.ts exports, and optional props stubs.

CSS or SCSS Modules

Generate nearby module files or choose --style none for style-free components.

Team defaults

Use .cnrc.json to keep language, style, test, and directory defaults consistent.

Custom templates

Bring reusable template files into the interactive picker with --template.

Batch generation

Create several components with one shared option set and all-or-nothing validation.

Test file generation

Add Component.test.jsx or Component.test.tsx beside the component.

CLI options

Control the generated files from flags or config.

Non-interactive defaults are functional, js, and css. CLI flags override .cnrc.json, and config values override the built-in defaults.

--lang js|ts

Choose JavaScript or TypeScript component files.

--style css|scss|none

Generate CSS Modules, SCSS Modules, or no style file.

--type

Use functional, arrow, class, memoized, or forwardRef templates.

--dir

Create the component folder under a target directory.

--with-test

Add a basic sibling component test file.

--format

Format generated files using the nearest Prettier configuration.

Templates

Choose the component shape you need.

Functional

Classic named function component with optional props.

Arrow

Concise `const Component = () => {}` output.

Class

React class component scaffold for legacy projects.

Memoized

Wrap components with `React.memo` for stable render paths.

ForwardRef

Create a component ready to pass refs through to a DOM node.

Custom

Load your own reusable template file or template directory.

ComponentName/
+-- index.js | index.ts
+-- ComponentName.jsx | ComponentName.tsx
+-- ComponentName.module.css | .scss
`-- ComponentName.test.jsx | .tsx

Workflow

Predictable files, ready to edit.

Generated components follow a small folder convention that keeps imports tidy, keeps styles near the component, and works across JavaScript and TypeScript React projects.

Read the full documentation

Why this tool

Small enough for existing projects.

This CLI is best for teams that already have a React project and only need a quick, predictable component folder convention. It avoids framework setup, keeps output readable, and lets each project decide its own styling, testing, and template conventions. 

create-new-react-component UserCard ProductCard \
  --type forwardRef \
  --lang ts \
  --style scss \
  --with-props \
  --with-test \
  --format \
  --dir src/components

FAQ

Answers for common React component generator searches.

How do I generate a React component from the terminal?

Run npx create-new-react-component Button to create a Button folder with a component file and index export.

Can it create TypeScript React components?

Yes. Use --lang ts to generate .tsx component files and index.ts exports.

Does it support CSS Modules and SCSS Modules?

Yes. Use --style css, --style scss, or --style none to control generated style files.

Can I create multiple components in one command?

Yes. Pass multiple names such as create-new-react-component Button UserCard Modal. The complete batch is validated before files are written.

Can it format generated files with Prettier?

Yes. Add --format or set "format": true in .cnrc.json to use the nearest project configuration.

Can I scaffold component tests?

Yes. Add --with-test to generate a sibling Component.test.jsx or Component.test.tsx file.

Can I set project defaults?

Yes. Add a .cnrc.json file for defaults like language, style, component type, test generation, and base directory.

Can I use custom component templates?

Yes. Use --template for one template file or --template-dir for a directory of reusable templates.