The Definitive Guide to React Component Naming Conventions

TL;DR

Naming React component files (.tsx) is best done by aligning with the UI library you are using.

• shadcn/ui → kebab-case
• Material UI → UpperCamelCase
  Rather than adding more rules, aligning with the library is simpler and easier for team development.

---

Naming Convention Philosophy

Recently, I re-evaluated how to name React component files (.tsx) in a project.

---

Differences Between .ts and .tsx

• .ts → Standard TypeScript files (logic, utilities, type definitions, etc.).
• .tsx → React-specific files. They compile differently and are primarily component-centric. Unit tests are often not written for them.

This means .tsx files can be given "special treatment".

---

Naming Styles for .tsx Files

Generally, there are two options:

1. UpperCamelCase (PascalCase)

   • Button.tsx
   • UserCard.tsx

2. kebab-case

   • button.tsx
   • user-card.tsx

Frankly, both are a matter of preference and can lead to disagreements in team development.

---

A New Approach: Align with the UI Library

• shadcn/ui → Generated component files are kebab-case.
• Material UI → Internally uses UpperCamelCase.

→ Therefore, aligning with the naming conventions of the UI library you are using is the simplest approach.
This reduces discussion and naturally creates consistency.

---

Aside: Distinguishing Self-Made Components

Conversely, you could use a naming convention not used by your UI library specifically for "self-made components" to distinguish them.

Example:

• If the UI library uses kebab-case (e.g., shadcn/ui)
  → Self-made components use UpperCamelCase
• If the UI library uses UpperCamelCase (e.g., Material UI)
  → Self-made components use kebab-case

However, making rules more complex can be troublesome, so ultimately, aligning with the library is the easiest.

---

Conclusion

• .ts and .tsx should be considered separately.
• The naming convention for .tsx should "align with the UI library."
• For team development, it's easier to simply unify rather than adding unnecessary rules.

---

👉 Personally, I'm settling on "aligning with the UI library" as the sole choice.