React Component Naming

Naming components correctly is an important part of writing clean and maintainable React applications.

A component name tells developers what a component represents and what responsibility it has. Good names make React code easier to read, understand, search, reuse, and maintain.

For example:

function ProductCard() {
  return <article>Product information</article>;
}

The name ProductCard immediately tells us what the component represents.

Compare that with:

function Box() {
  return <article>Product information</article>;
}

Box doesn’t tell us much about its purpose.

Component naming becomes increasingly important as applications grow. A project with 5 components can survive with mediocre names, but a project with hundreds of components becomes difficult to navigate if the names are unclear or inconsistent.

Why Component Naming Matters

A React application is made up of many components.

For example:

Application
│
├── Header
├── Navigation
├── HeroSection
├── ProductList
│   └── ProductCard
├── ShoppingCart
├── CheckoutForm
└── Footer

When components have meaningful names, you can understand the application’s structure almost immediately.

For example:

<ProductList />
<ShoppingCart />
<CheckoutForm />

is much easier to understand than:

<List />
<Box />
<Form />

Good naming communicates intent without requiring you to open every component file.

Component Names Must Start With an Uppercase Letter

React component names should begin with an uppercase letter.

This is one of the most important naming rules.

Correct:

function Header() {
  return <header>Header</header>;
}

Use it as:

<Header />

Incorrect:

function header() {
  return <header>Header</header>;
}

If you write:

<header />

React treats header as a built-in HTML element rather than your custom React component.

Why Does React Care About Capitalization?

JSX uses capitalization to distinguish between built-in elements and custom components.

For example:

<div />

represents an HTML element.

But:

<Header />

represents a custom component.

The capitalization provides an important distinction:

Lowercase
   ↓
Built-in HTML element

Uppercase
   ↓
Custom React component

Therefore, this:

function Button() {
  return <button>Click Me</button>;
}

should be rendered as:

<Button />

not:

<button />

when referring to your custom component.

Use PascalCase for Component Names

React components are conventionally named using PascalCase.

PascalCase means that each word begins with an uppercase letter and there are no spaces between words.

Examples:

Header
Footer
ProductCard
UserProfile
SearchBar
LoginForm
CourseCard
NavigationBar
ShoppingCart

For example:

function ProductCard() {
  return <article>Product</article>;
}

and:

function UserProfile() {
  return <section>User Profile</section>;
}

This naming style makes multi-word components easy to recognize.

Single-Word Component Names

For components with a single word, simply capitalize the first letter.

Examples:

Header
Footer
Sidebar
Navbar
Button
Modal
Avatar
Logo
Banner

For example:

function Sidebar() {
  return <aside>Sidebar</aside>;
}

Multi-Word Component Names

For components with multiple words, capitalize the beginning of each word.

Correct:

ProductCard
UserProfile
LoginForm
CourseList
SearchBar
NavigationMenu
OrderSummary
PaymentForm

Avoid:

productCard
userprofile
login_form
course-list

PascalCase provides a consistent naming convention throughout the project.

Component Names Should Describe the UI

A good component name should communicate what the component does or represents.

For example:

function ProductCard() {
  return (
    <article>
      <h2>Laptop</h2>
      <p>₹59,999</p>
    </article>
  );
}

ProductCard tells us that the component represents a card displaying product information.

Another example:

function LoginForm() {
  return (
    <form>
      <input type="email" />
      <input type="password" />
      <button>Login</button>
    </form>
  );
}

The name LoginForm clearly describes its purpose.

Avoid Vague Component Names

Avoid names that don’t communicate the component’s responsibility.

For example:

function Box() {
  return <div>...</div>;
}

What does Box represent?

It could be:

• A product card
• A sidebar
• A notification
• A profile
• A modal
• A container

A more meaningful name would be:

function ProductCard() {
  return <div>...</div>;
}

The name immediately provides context.

Other vague names include:

Thing
Component
Box
Container
Stuff
Section
Item
Data
Content

These names aren’t always wrong, but they often fail to communicate the component’s actual responsibility.

Name Components Based on Their Responsibility

Consider a component that displays a user’s profile.

Instead of:

function Box() {
  return <div>Profile...</div>;
}

use:

function UserProfile() {
  return <div>Profile...</div>;
}

For a navigation menu:

function NavigationMenu() {
  return <nav>...</nav>;
}

For a shopping cart:

function ShoppingCart() {
  return <aside>...</aside>;
}

For a checkout form:

function CheckoutForm() {
  return <form>...</form>;
}

The component name should answer:

What is this component responsible for?

Name Components According to Their Role

Sometimes a component represents a role rather than a specific HTML element.

For example:

function Header() {
  return <header>...</header>;
}

function Sidebar() {
  return <aside>...</aside>;
}

function Footer() {
  return <footer>...</footer>;
}

These names communicate the role of the component.

Don’t Name Components After HTML Elements

You technically can create a component called:

function Div() {
  return <div>...</div>;
}

but this is usually a poor naming choice.

It tells you what HTML element it uses rather than what the component represents.

Prefer:

function ProductCard() {
  return <div>...</div>;
}

The component might internally use a <div>, but its name describes its purpose.

Use Consistent Naming Patterns

Consistency is extremely important in larger React applications.

If you use:

ProductCard
UserCard
CourseCard

then similar components can follow the same pattern.

For forms:

LoginForm
SignupForm
CheckoutForm
ContactForm

For lists:

ProductList
UserList
CourseList
OrderList

For pages:

HomePage
ProductsPage
ProfilePage
SettingsPage

Consistent naming makes the project easier to navigate.

Component Name vs File Name

It is common to give the component and its file the same name.

For example:

ProductCard.jsx

contains:

function ProductCard() {
  return <article>Product</article>;
}

export default ProductCard;

Similarly:

UserProfile.jsx

contains:

function UserProfile() {
  return <section>Profile</section>;
}

export default UserProfile;

This makes components easy to locate.

A project might look like:

components/
├── Header.jsx
├── Footer.jsx
├── ProductCard.jsx
├── UserProfile.jsx
├── SearchBar.jsx
└── LoginForm.jsx

When you see ProductCard.jsx, you can immediately expect to find a ProductCard component inside it.

Naming Components That Represent Pages

Page-level components can use names that end with Page.

For example:

function HomePage() {
  return <main>Home</main>;
}

function ProductsPage() {
  return <main>Products</main>;
}

function ProfilePage() {
  return <main>Profile</main>;
}

This makes it clear that these components represent complete pages rather than smaller UI elements.

A typical structure might be:

pages/
├── HomePage.jsx
├── ProductsPage.jsx
├── ProfilePage.jsx
└── SettingsPage.jsx

Naming Components That Represent Forms

Forms can be named based on their purpose.

Examples:

LoginForm
SignupForm
RegistrationForm
CheckoutForm
ContactForm
SearchForm
PaymentForm

For example:

function LoginForm() {
  return (
    <form>
      <input type="email" />
      <input type="password" />
      <button>Login</button>
    </form>
  );
}

The name immediately tells the developer what the form is for.

Naming Components That Represent Lists

When a component renders a collection of items, names such as List are useful.

Examples:

ProductList
UserList
CommentList
CourseList
NotificationList
OrderList

For example:

function ProductList() {
  return (
    <section>
      {/* Product cards */}
    </section>
  );
}

A list component can then render smaller item components:

ProductList
   │
   ├── ProductCard
   ├── ProductCard
   └── ProductCard

Naming Components That Represent Individual Items

For individual items, use names such as:

ProductCard
UserCard
CourseCard
CommentItem
TodoItem
NotificationItem

The suffix can communicate how the component is presented.

For example:

function CommentItem() {
  return (
    <article>
      <p>This is a comment.</p>
    </article>
  );
}

Card vs Item

Choose names that accurately describe the UI.

If an item is visually presented as a card:

<ProductCard />

is appropriate.

If it represents an individual row or list item:

<ProductItem />

may be more appropriate.

The naming should reflect the actual role of the component.

Naming Components Based on Context

Sometimes a generic name can be confusing.

For example, imagine your application has two different headers:

Website Header
Dashboard Header

Calling both:

Header

could create confusion.

More specific names may be better:

WebsiteHeader
DashboardHeader

Similarly:

AdminSidebar
UserSidebar
CourseSidebar

This is useful when components have different responsibilities despite having similar visual roles.

Avoid Unnecessary Names Like Custom

You may sometimes see names such as:

CustomButton
CustomCard
CustomHeader
CustomInput

The word Custom usually doesn’t tell you anything useful.

If it is your own React component, that is already understood.

Prefer:

Button
ProductCard
Header
Input

unless the word Custom genuinely distinguishes it from another component with the same role.

Avoid Generic Numbered Names

Avoid names such as:

Card1
Card2
Box1
Section2
Component3

These names provide almost no information about the component’s purpose.

Instead of:

function Card1() {
  ...
}

use:

function ProductCard() {
  ...
}

The name remains meaningful even if the component is moved to another part of the application.

Don’t Name Components After Their Current Location

A component shouldn’t usually be named only because of where it happens to appear.

For example:

TopSection
LeftBox
BottomContainer
MiddleContent

These names can become incorrect when the layout changes.

Instead, name the component according to what it represents:

HeroSection
Sidebar
Footer
ProductList

A ProductList remains a ProductList even if you move it from the middle of the page to the sidebar.

Avoid Overly Long Names

Names should be descriptive, but they shouldn’t become unnecessarily complicated.

For example:

VeryDetailedFeaturedProductCardWithDiscountInformation

is difficult to read.

A better name might be:

FeaturedProductCard

If the component has become so specific that its name needs many words, it may be worth reconsidering the component’s responsibility.

Naming Boolean Components Carefully

Some components represent a state or condition.

For example:

LoadingSpinner
ErrorMessage
EmptyState
SuccessMessage

These names communicate what the component represents.

For example:

function LoadingSpinner() {
  return <div>Loading...</div>;
}

Instead of:

function LoadingThing() {
  return <div>Loading...</div>;
}

The first name is much clearer.

Naming Modal Components

Modal components can be named according to their purpose.

Examples:

LoginModal
DeleteAccountModal
ConfirmDeleteModal
ProductDetailsModal
SettingsModal

For example:

function DeleteAccountModal() {
  return (
    <div>
      <h2>Delete Account?</h2>
      <button>Cancel</button>
      <button>Delete</button>
    </div>
  );
}

The name tells you exactly what the modal does.

Naming Navigation Components

Navigation components can use clear names such as:

Navigation
Navbar
MainNavigation
SidebarNavigation
MobileNavigation
AdminNavigation

Choose the name based on the component’s actual role.

For example:

function MainNavigation() {
  return (
    <nav>
      <a href="/">Home</a>
      <a href="/courses">Courses</a>
    </nav>
  );
}

Naming Components Based on Variants

Sometimes a component has different versions.

For example:

PrimaryButton
SecondaryButton
IconButton
DangerButton

However, before creating separate components for every visual variation, consider whether a single reusable component with props would be better:

<Button variant="primary">
  Save
</Button>

or:

<Button variant="danger">
  Delete
</Button>

The naming decision should support the component’s actual design.

Naming Wrapper Components

Some components provide layout or structure.

Examples:

PageLayout
DashboardLayout
AuthLayout
Card
Modal
Container

For example:

function DashboardLayout({ children }) {
  return (
    <div className="dashboard-layout">
      {children}
    </div>
  );
}

DashboardLayout communicates that the component provides the structure for dashboard content.

Naming Components for Reusable UI

If a component is designed to be reused throughout an application, give it a general but meaningful name.

For example:

function Button({ children }) {
  return <button>{children}</button>;
}

This is better than:

function BlueButton() {
  return <button>...</button>;
}

Why?

Because BlueButton describes an implementation detail.

If the design changes from blue to another color, the name becomes misleading.

A better name describes the component’s role:

Button

and styling can determine its appearance.

Name by Meaning, Not Appearance

This is an important naming principle.

Avoid:

BlueButton
RedCard
LargeBox
GreenMessage
RoundedContainer

when the color, size, or appearance isn’t the component’s fundamental purpose.

Prefer:

Button
ErrorMessage
ProductCard
Container

Then styling can change without making the component name inaccurate.

Component Naming and Props

Sometimes the component name should remain general while props describe its variation.

For example:

function Button({ variant, children }) {
  return (
    <button className={variant}>
      {children}
    </button>
  );
}

Use:

<Button variant="primary">
  Save
</Button>

and:

<Button variant="danger">
  Delete
</Button>

You don’t necessarily need:

PrimaryButton
DangerButton
SuccessButton
WarningButton

for every variation.

A reusable Button component can often handle these differences through props.

Naming Components in a Component Tree

Good names make a component tree easier to understand.

For example:

App
│
├── Header
│   ├── Logo
│   └── MainNavigation
│
├── HomePage
│   ├── HeroSection
│   ├── FeaturedCourses
│   │   └── CourseCard
│   └── NewsletterForm
│
└── Footer

Compare this with:

App
│
├── Box
│   ├── Thing
│   └── Menu
│
├── Section1
│   ├── Box2
│   └── Items
│
└── Bottom

The first tree communicates the application’s structure immediately.

Good naming is therefore especially valuable when working with nested components.

Naming Components and Accessibility

Component names don’t directly determine accessibility, but meaningful names can make accessibility-focused development easier.

For example:

function SearchForm() {
  return (
    <form>
      <label htmlFor="search">Search</label>
      <input id="search" />
      <button>Search</button>
    </form>
  );
}

SearchForm clearly communicates the component’s purpose, making it easier for developers to understand where search-related accessibility behavior belongs.

Naming Components in Large Projects

Large applications may have many components with similar responsibilities.

For example:

components/
├── common/
│   ├── Button.jsx
│   ├── Modal.jsx
│   └── Card.jsx
│
├── products/
│   ├── ProductCard.jsx
│   ├── ProductList.jsx
│   └── ProductFilters.jsx
│
├── users/
│   ├── UserCard.jsx
│   ├── UserProfile.jsx
│   └── UserList.jsx
│
└── checkout/
    ├── CheckoutForm.jsx
    ├── PaymentForm.jsx
    └── OrderSummary.jsx

Folder organization can provide context, while component names provide the specific responsibility.

Common Naming Mistakes

Starting With a Lowercase Letter

Incorrect:

function productCard() {
  return <div>Product</div>;
}

Correct:

function ProductCard() {
  return <div>Product</div>;
}

Using Hyphens

Avoid:

function product-card() {}

JavaScript identifiers cannot be written this way.

Use:

function ProductCard() {}

Using Spaces

Incorrect:

Product Card

Use:

ProductCard

Using Underscores

You may technically see names such as:

Product_Card

but PascalCase is the conventional React style:

ProductCard

Using Numbers as the Main Identifier

Avoid:

Card1
Card2
Card3

Name components according to their purpose instead.

Best Practices

Use PascalCase

function ProductCard() {}

Be Descriptive

function UserProfile() {}

is better than:

function Box() {}

Prefer Meaning Over Appearance

Use:

ErrorMessage

rather than:

RedText

Use Consistent Suffixes

For example:

Page
Form
Card
List
Item
Modal
Section
Layout

These suffixes can communicate the role of a component.

Keep Names Reasonably Short

Aim for names that are descriptive without becoming unnecessarily long.

Good:

FeaturedProductCard

Less ideal:

FeaturedProductCardWithPriceAndDiscountAndPurchaseButton

Let Props Handle Variations

Instead of creating many nearly identical components:

<Button variant="primary" />
<Button variant="danger" />

can often be better than creating separate components for every visual variation.

Practical Example

Imagine you’re building a course platform.

The page contains:

Course Page
│
├── Header
├── CourseHero
├── CourseInfo
├── InstructorCard
├── LessonList
│   └── LessonItem
├── Reviews
│   └── ReviewCard
└── Footer

These names immediately communicate the application’s structure.

The code might look like:

function CoursePage() {
  return (
    <>
      <Header />

      <main>
        <CourseHero />
        <CourseInfo />
        <InstructorCard />
        <LessonList />
        <Reviews />
      </main>

      <Footer />
    </>
  );
}

Even without opening the individual components, another developer can understand the general structure of the page.

That is the goal of good component naming.

A Naming Decision Checklist

Before naming a component, ask:

What does this component represent?

ProductCard

What is its main responsibility?

Displaying product information

Is the name based on purpose rather than appearance?

ProductCard

rather than:

WhiteBox

Will the name still make sense if the design changes?

A good name should survive visual redesigns.

Does it follow the naming style used by the rest of the project?

Consistency matters.

Image Placement

Place this image immediately after the section “Use PascalCase for Component Names”.

Create a 16:9 modern React educational infographic comparing correct and incorrect React component naming.

Show:

CORRECT
ProductCard
UserProfile
LoginForm
CourseList
NavigationBar

and:

AVOID
productCard
user_profile
login-form
Course_List
card1

Also show the important distinction:

<Header />  → React Component
<header />  → HTML Element

Use a modern code-editor-inspired visual style, clean typography, subtle React branding, clear check/cross indicators, and minimal text. Make it look like a contemporary developer education graphic rather than an old textbook illustration.

Caption: React components use PascalCase to distinguish custom components from HTML elements.

Alt text: React component naming guide showing PascalCase examples and incorrect naming patterns.

Practice Exercise

Create a React application for an online learning platform.

Identify meaningful components for this interface:

Learning Platform
│
├── Website Header
├── Course Search
├── Featured Courses
├── Course Card
├── Student Profile
├── Notification Area
└── Website Footer

Give each component an appropriate React name.

For example:

function Header() {
  return <header>...</header>;
}

Create names for the remaining components using PascalCase.

Then create these components:

<CourseSearch />
<FeaturedCourses />
<CourseCard />
<StudentProfile />
<NotificationArea />
<Footer />

Bonus Challenge

Look at the following component names and improve the ones that are unclear:

Box
Box1
blueButton
User_Data
product-card
Section2
Form

Create better names based on their likely purpose.

For example:

blueButton
      ↓
Button

if the component is simply a reusable button whose color is controlled by props or styling.

Quick Naming Cheat Sheet

Situation	Recommended
Single word	Header
Multiple words	ProductCard
Page	HomePage
Form	LoginForm
Collection	ProductList
Individual item	ProductItem
Card UI	ProductCard
Modal	DeleteAccountModal
Layout	DashboardLayout
Navigation	MainNavigation
Loading UI	LoadingSpinner
Error UI	ErrorMessage
Empty UI	EmptyState
User section	UserProfile

Key Takeaways

• React component names should begin with an uppercase letter.
• Use PascalCase for component names.
• ProductCard is a component name, while productCard is not the conventional React component naming style.
• Capitalization helps JSX distinguish custom components from built-in HTML elements.
• Choose names that describe the component’s purpose or responsibility.
• Avoid vague names such as Box, Thing, or Component when a more meaningful name is available.
• Avoid naming components primarily after colors, sizes, or temporary visual details.
• Use consistent suffixes such as Card, List, Item, Form, Page, Modal, and Layout when they accurately describe the component.
• Component filenames commonly match component names, such as ProductCard.jsx containing ProductCard.
• Use props when a single component needs to support multiple variations.
• Don’t create separate components simply because two versions have different colors or styles.
• Good component names make the component tree easier to understand.
• A good name should remain meaningful even when the component’s styling or location changes.
• Name components by what they represent, not merely by what they currently look like.