How does it decide the component kind?

It tokenizes your description and matches the words against keyword sets for each kind. Words like modal, dialog, popover, or drawer signal an overlay; input, field, select, or form signal a form; alert, toast, spinner, or progress signal feedback; nav, tabs, breadcrumb, or sidebar signal navigation; card, list, table, badge, or avatar signal display; and container, stack, grid, or section signal layout. More specific kinds (overlay, feedback, form) are tested before broad ones, and the inferred kind drives which suffixes the candidates get.

Why are some names ranked higher than others?

Each candidate gets a 0–100 relevance score. A clean PascalCase name built from your key words ranks highest, a concise two-word form is close behind because shorter names import better, and kind-suffixed variants (…Modal, …Card, …Form) get a bonus when your description clearly matches that kind. The list is sorted by score, so the top card is usually the one you want.

What does the file scaffold show?

For the selected name it lists the conventional co-located files — Name/Name.tsx for the implementation, Name/index.ts as a barrel re-export, Name/Name.test.tsx for tests, Name/Name.stories.tsx for Storybook, and an optional Name/Name.module.css for scoped styles — along with the import line a consumer would write (import { Name } from '@/src/components/Name'). It’s a preview of paths and the import; it doesn’t write files to disk.

What does the name validator check?

It grades a proposed name on several axes: it must be PascalCase (JSX treats a lowercase tag as a DOM element, so "button" silently renders a real ), it must not collide with a native HTML element or a JavaScript reserved word, it should avoid empty suffixes like Component, Widget, or Manager, and it should be a sensible length and word count. Each issue is graded error / warning / info with a concrete suggested fix, and the name gets an overall quality score.

Why does the casing matter so much in React?

React uses the first letter of a JSX tag to decide whether it’s a built-in DOM element or your component. A lowercase name is rendered as an HTML tag, so a component called "card" or "button" either errors or quietly renders nothing useful. That’s why every generated component name is PascalCase, and why the validator flags lowercase names as an error with the PascalCase fix.

Can I share or reproduce a result?

Yes. The description, prefix, kind filter, CSS-module toggle, and the name you’re validating are all encoded into the page URL as you work, so copying the share link hands someone the exact same suggestions, scaffold, and validation. You can also copy any single name, or copy the combined output (ranked names plus the scaffold) to paste into a ticket or pipe into another tool.

Component Name Generator

Describe a component in plain English and get ranked, semantic name candidates across PascalCase, camelCase and kebab-case — each categorised by component kind (layout, display, form, feedback, navigation, overlay) with a short rationale. Preview the conventional co-located file scaffold for any name, and validate a proposed name against PascalCase rules, HTML-element and reserved-word collisions, length and vague suffixes.

About this ToolHow it works, benefits & use cases

Most name generators just re-case your sentence three ways. This one reads your plain-English description, infers the component KIND — layout, display, form, feedback, navigation, or overlay — from the words you used, and ranks real, semantic name candidates accordingly. Describe "confirmation modal for deleting an account" and it knows it’s an overlay, so it offers DeleteAccountModal and DeleteAccountDialog ahead of a generic base name, each with a short rationale and a relevance score. Every candidate carries its PascalCase, camelCase, and kebab-case forms so you can grab the right casing for a component, a hook/instance, or a file. Pick any name and the tool shows the conventional co-located file scaffold — Button/Button.tsx, Button/index.ts, Button/Button.test.tsx, Button/Button.stories.tsx, an optional Button/Button.module.css — plus the exact import line. A built-in validator grades any proposed name against PascalCase rules, native HTML-element and JavaScript reserved-word collisions, length, and vague suffixes (Component, Widget, Manager), returning graded issues with a suggested fix. The full configuration lives in a shareable URL.

How to Use

1Type what the component does or displays into the description box (or pick an example chip).
2Optionally set a prefix/namespace (App, Ui, Base) and a kind filter to narrow the suggestions.
3Scan the ranked cards — each shows the name, inferred kind, score, rationale, and its camelCase/kebab-case forms.
4Click a candidate to preview its conventional file scaffold and import path; toggle the CSS-module option to match your setup.
5Type any proposed name into "Validate a name" to grade its casing, collisions, length, and clarity with fixes.
6Copy a single name, copy the combined output, or share the URL to hand a teammate the exact result.

Key Benefits

Infers component kind (layout/display/form/feedback/navigation/overlay) from your description
Ranked, scored candidates with a short rationale for each — not just three re-casings
Every name in PascalCase, camelCase, and kebab-case for components, instances, and files
Optional prefix/namespace (App, Ui, Base) applied consistently across candidates
File-scaffold preview with the conventional co-located files and the exact import path
Name validator catches lowercase/JSX-tag mistakes, HTML and reserved-word collisions, and vague suffixes
Shareable URL captures the description, options, and validated name

Common Use Cases

Breaking naming paralysis when starting a component from a spec or ticket
Getting a kind-appropriate name (Modal, Card, Form, Alert) without guessing the convention
Generating the file scaffold and import path before you create the folder
Validating a name a teammate proposed in review against PascalCase and collision rules
Producing consistent App-/Ui-prefixed names for a component library or design system
Grabbing the kebab-case form for a custom element or CSS file from the same suggestion

Ranked names

Display component

File scaffoldUserProfileCardAvatarBio

src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.tsxComponent implementation
src/components/UserProfileCardAvatarBio/index.tsBarrel re-export for clean imports
src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.test.tsxUnit / component test
src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.stories.tsxStorybook stories
src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.module.cssScoped styles

import { UserProfileCardAvatarBio } from '@/src/components/UserProfileCardAvatarBio';

Suggestions output

Ranked names + file scaffold — copy or pipe to another tool

UserProfileCardAvatarBio  // Display · Direct PascalCase from your description’s key words.
UserProfile  // Display · Shorter two-word name — easier to read and import.
UserProfileCardAvatarBioCard  // Display · Adds the conventional “Card” suffix for a display component.
UserProfileCardAvatarBioList  // Display · Adds the conventional “List” suffix for a display component.
UserProfileCard  // Display · Concise name with the “Card” suffix.
UserProfileList  // Display · Concise name with the “List” suffix.
BioCard  // Display · Focuses on the core noun “bio” plus its role.

// Scaffold for UserProfileCardAvatarBio
src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.tsx
src/components/UserProfileCardAvatarBio/index.ts
src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.test.tsx
src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.stories.tsx
src/components/UserProfileCardAvatarBio/UserProfileCardAvatarBio.module.css

import { UserProfileCardAvatarBio } from '@/src/components/UserProfileCardAvatarBio';

Describe the component

What does it do or display?

Plain English is fine — the more concrete, the better the names.

Prefix / namespace

Kind filter

Include a CSS module in the scaffold

Adds a Name.module.css file to the previewed file set.

Validate a name

Proposed component name

Type a name to check casing, HTML/reserved collisions, length, and vague suffixes.

Names are an interface

A component’s name is the first thing every teammate reads. Good names are PascalCase, say what the component does rather than how it’s built, and avoid empty suffixes like Component or Widget. This tool infers the component kind from your description and ranks candidates accordingly — an overlay gets a Modal suffix, a display gets a Card, and so on.

Why validate?

In JSX a lowercase tag is treated as a DOM element, so button silently renders a real<button> instead of your component. The validator catches that, plus reserved-word collisions and names that are too long or too vague to be self-documenting.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Component Name Generator

How to Use

Key Benefits

Common Use Cases

Ranked names

Describe the component

Validate a name

Names are an interface

Why validate?

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Component Name Generator