# new-component: a CLI that scaffolds a React component folder for you

> new-component is a small MIT licensed CLI from Josh Comeau that creates a component directory with an index file and the component file, formatted with your own Prettier config and laid out according to a particular file structure convention. It generates TypeScript by default since version 5, it breaks on the Next.js App Router, and its author states plainly that it is not actively maintained.

**joshwcomeau/new-component** — ⚛ ⚡ CLI utility for quickly creating new React components. ⚡ ⚛

- Repository: https://github.com/joshwcomeau/new-component
- Stars: 756 · Forks: 135
- Language: JavaScript
- License: MIT
- Published: 2026-10-21 · Updated: 2026-10-21 · Language: en
- Canonical page: https://hysenlabs.com/projects/joshwcomeau-new-component

## A scaffolder built around one opinionated directory shape

new-component is a CLI tool that allows you to quickly scaffold new components, with all the necessary boilerplate generated automatically. The boilerplate it generates is deliberately specific. The project uses an opinionated file structure that the author discusses in a blog post on a delightful React file and directory structure, and the tool is one implementation of that convention rather than a general purpose template engine.

The output for a component named MyNewComponent is a directory at src/components/MyNewComponent containing two files. The first is a barrel file that re-exports the component as the default export:

```js
// `MyNewComponent/index.js`
export { default } from './MyNewComponent';
```

The second is the component itself, a function that returns an empty div:

```js
// `MyNewComponent/MyNewComponent.js`
import React from 'react';

function MyNewComponent() {
  return <div></div>;
}

export default MyNewComponent;
```

The two-file split is the whole point of the layout. A folder per component means the component file, its styles, its tests and its stories can live side by side later without another restructure, and the index file gives importers a single stable path to reach. The empty div is a starting point, and the point of the tool is that you overwrite the body and never think about the wiring again.

## Installing globally and running the first scaffold

The tool is published to npm and is installed globally, either with Yarn or with npm:

```bash
# Using Yarn:
$ yarn global add new-component

# or, using NPM
$ npm i -g new-component
```

Global installation is what makes the bare new-component command available anywhere, and it is the reason the tool does not need to be a dependency of the project you are scaffolding into.

Once installed, you move into the project directory and run the command with the component name:

```bash
$ new-component MyNewComponent
```

The new directory appears under src/components, and both files are then formatted according to your Prettier configuration. That last point is the one that makes the tool more than a template copier: because the generated files are passed through Prettier using the config already in your project, the output matches your existing style, including your semicolon preference, your quote style and your print width, rather than arriving as a formatting diff you have to fix.

The features list also names colourful terminal output, which is a small thing but it is the difference between a tool that feels considered and one that prints nothing while it writes files.

## Global config, local config and flags, merged in that order

Configuration is available through three routes. A global .new-component-config.json in your home directory, at ~/.new-component-config.json. A local .new-component-config.json in the project root. And command-line arguments.

The merge order is what makes the design usable: the resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones. So the natural workflow is to set a personal default for the language you prefer, set a project default for the directory convention that project uses, and override either at the command line for the occasional one-off.

The API reference documents two options. The lang option controls which language is used, with ts creating a .tsx file as the default and js creating a .jsx file. It is passed as --lang with a value or -l with a value, or set in JSON config as { "lang": <value> }.

The dir option controls the desired directory for the created component, defaulting to src/components, and is passed as --dir with a value or -d with a value, or set as { "dir": <value> } in the JSON config.

Two options is a small surface, and that is a strength for a tool whose whole job is to be predictable.

## TypeScript by default, and the removal of custom file extensions

Version 5 changed the defaults in a way that affects existing scripts. The new version adds support for TypeScript, and removes support for passing a custom file extension. The release history shows the jump from v5 in February 2023 through v6 in December 2024 to v7 on 2026-09-20, with the manifest at version 7.0.0.

The practical effect is that a team that previously passed something like .jsx to get JavaScript output now selects the language with the lang option instead, and the extension is derived from it. The default changed with it: ts is the default, so a fresh install produces a .tsx file rather than a .jsx one.

That default is a decision worth a second look if your project is JavaScript. It is not wrong, TypeScript being the sensible default for a new project, but it means an existing JavaScript codebase either passes --lang js on every invocation or sets lang in its local .new-component-config.json.

The removal of custom extensions also means there is no supported way to produce, say, a .ts file with a different naming convention. The tool now offers exactly two outputs, and if your project needs a third shape you are back to writing the file.

## The Next.js App Router breaks the generated barrel file

This is the known issue and the most important thing to check before adopting the tool in a modern project. If you use the package with the Next.js App Router, you run into an error:

```md
**Syntax error:** the name `default` is exported multiple times
```

The cause is the wildcard export in the generated index file. The App Router treats client and server module boundaries differently from the Pages Router, and the pattern the tool writes, a directory whose index file re-exports the component, trips over the multiple default export rule in that router.

The documented fix is blunt: to solve the problem you will need to fork this library and remove the wildcard export, with a link to the exact line in src/index.js. That is a maintenance burden baked into the tool's design, and it is worth understanding that the barrel file is not an incidental detail but the central feature. The directory-plus-index convention is what makes the layout work, and it is the same convention that App Router does not accept in that form.

The author has written the issue up in depth in the blog post about the package, so the reasoning is available even if the fix is a fork.

## Platform support and the maintenance position

Platform support is stated narrowly. The tool has only been tested in macOS. The author thinks it would work fine in Linux, but has not tested it, and Windows is described as a big question mark.

For a tool that runs a formatter and writes files, that is a low risk in principle, but it does mean the support commitment is one platform, and Windows, which is where a lot of React work still happens, is untested territory.

The maintenance statement is blunter still. The project documentation says it is not actively maintained, that the author continues to use it in his own projects, but does not have the bandwidth to review pull requests or triage issues, and invites people to fork it and tweak it as they wish.

The last push was on 2026-09-20, which is the same day as the v7 release, so the code is current in the sense that it is the latest tagged state. But a tool with no issue triage and no pull request review is a tool you should treat as finished rather than as a dependency to build a team workflow around. Forking it is the documented path if you need changes, and the MIT licence makes that straightforward.

## How the tool is built, and how to work on it

The package is small and the dependency list explains the whole implementation. There is chalk 4 for the colourful terminal output, commander 10 for the command line interface and argument parsing, and prettier 2.8.4 as a runtime dependency rather than a peer dependency, which is what lets the tool format the generated files with the config it finds in the target project.

The bin entry maps the new-component command to src/index.js, and the main field points at the same file, so the CLI is also importable as a module if you want to script it. The only script defined is a test command that echoes an error and exits with a failure, so there is no test suite in the package.

The development workflow in the documentation is the manual loop you would expect. Fork and clone the repository, install dependencies with yarn install or npm install, then set up a symlink by running npm link while in the new-component directory, which makes the new-component command use the locally cloned project rather than the global npm installation. Finally, spin up a test React project and use the new-component command there to create components and check your changes.

That last step is the reason for the symlink: you need a separate throwaway project to scaffold into, since the tool writes into whatever directory you run it from.

## Conclusion

Adopt new-component if your project already follows the directory convention it generates, you want the component folder rather than a single file, and you want the output formatted by your own Prettier configuration instead of a template you have to reformat by hand. Do not adopt it for a Next.js App Router project, because the wildcard export it writes triggers a duplicate default export error and the documented fix is to fork the library and remove that export, and do not adopt it if you need ongoing support, since the author states the project is not actively maintained. Before you install it, check that the lang and dir options in the API reference match what you want, since the default is a .tsx file under src/components, and confirm your platform, as the tool has only been tested in macOS.

## FAQ

### How do I install and use the new-component CLI?

Install it globally with yarn global add new-component or npm i -g new-component, then cd into your project and run new-component MyNewComponent. It creates src/components/MyNewComponent containing an index file and the component file, both formatted with your Prettier configuration.

### Does new-component work with the Next.js App Router?

No. It produces a syntax error saying the name default is exported multiple times, caused by the wildcard export in the generated index file. The documented fix is to fork the library and remove that export from src/index.js.

### How do I configure new-component?

Through a global .new-component-config.json in your home directory, a local .new-component-config.json in the project root, or command line arguments. The values merge with command line overwriting local and local overwriting global. The options are lang, which picks ts or js, and dir, which defaults to src/components.

### Is new-component still maintained?

The project states that it is not actively maintained, that the author still uses it in their own projects, and that there is not the bandwidth to review pull requests or triage issues, and it invites forks. The last push was on 2026-09-20, the same day as the v7 release.

### Which platforms does new-component support?

It has only been tested in macOS. The author believes it would work fine on Linux but has not tested it, and describes Windows as a big question mark.

## Sources

- [Issues](https://github.com/joshwcomeau/new-component/issues)
- [joshwcomeau/new-component on GitHub](https://github.com/joshwcomeau/new-component)
- [License: MIT](https://github.com/joshwcomeau/new-component/blob/main/LICENSE)
- [README](https://github.com/joshwcomeau/new-component/blob/main/README.md)
- [Releases](https://github.com/joshwcomeau/new-component/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/joshwcomeau-new-component