React Component MakerReact Component Maker
Menu
VS Code Extension — v0.0.8

React Component
in one right-click

Generate fully structured React components from your own templates — with styles, index files, types, and tests — without leaving VS Code.

TypeScript & JavaScript5 naming stylesPer-project configCSS / SCSS / Modules

How it works

Three steps from folder to component

01

Right-click a folder

In VS Code Explorer, right-click any folder and choose "Create React Component".

02

Name your component

Enter the component name. Casing is applied automatically based on your settings.

03

Pick a template

Select from your custom templates. Files are generated instantly.

Everything you need

Flexible, template-driven component scaffolding

Custom Templates

Create components from your own .jsx / .tsx templates stored in the .react-templates folder.

TypeScript & JavaScript

Supports both .tsx and .jsx workflows with a single toggle in settings.

Style Files

Auto-generate CSS, SCSS, or CSS Modules alongside every component.

Index & Type Files

Barrel re-exports and types.ts generated from configurable templates.

Unit Tests

Scaffold test files in a tests/ subfolder using your own test template.

Naming Styles

Choose PascalCase, camelCase, kebab-case, snake_case or lowercase — per file and folder.

Per-project Config

Drop a .rcmakerrc.json next to package.json — no more switching global settings.

Right-Click Workflow

Just right-click any folder in Explorer and choose "Create React Component". Done.

Per-project config

One file, one project

Drop a .rcmakerrc.json next to your package.json and the extension picks it up automatically. No more touching global settings when switching between projects.

Local settings take priority over global ones. Missing fields fall back gracefully.

.rcmakerrc.json
{
  "useTypeScript": true,
  "folderNameStyle": "kebab-case",
  "fileNameStyle": "PascalCase",
  "createStyleFile": true,
  "styleExtension": "module.css",
  "generateIndexFile": true,
  "indexInComponentFolder": false
}

Ready to speed up your workflow?

Install from the VS Code Marketplace and start generating components in seconds.

Agama Labs — Web & App Development and Digital Marketing

 — Web & App Development · Digital Marketing