A Short Guide to Naming Components in 2025

Naming components well is more than just a clean code practice—it’s a communication tool. In 2025, where teams span time zones and tools integrate like never before, clarity is currency.

1. Clarity Over Cleverness

Avoid abstract or “smart” names. Instead of TurbineCore or ZebraWidget, go with UserAvatarCard, PricingTable, or FeatureGrid. Your future team (and your future self) will thank you.

2. Think in Terms of Use, Not Structure

Good component names explain what they do, not how they do it. Instead of LeftSidebarV2, try DashboardNavigation. The goal is to convey intent, not implementation.

3. Make Searchability Easy

Whether you’re in VSCode, GitHub, or your design system, components should be easy to find. Stick to consistent patterns, avoid unnecessary abbreviations, and prefer words your entire team uses—not just you.

4. Be Consistent Across Code and Design

Names should align across Figma, storybook, and your codebase. If your designer calls it a “Hero Banner,” use that in the file name too. Avoid Header1 or MainIntro unless your whole team agrees on what those mean.

---

Pro Tip: Maintain a shared “Component Glossary” or Figma/code naming guide to avoid confusion and keep communication tight.