React File and Folder Naming Standards

Standard naming conventions for React files, custom hooks, typings, and folders.
Published: 7/20/2026

Consistent naming rules ensure the project remains organized and allows code generators to import components and types predictably without directory-scanning overhead.

  • Components: PascalCase for files and exports (e.g. OptionSwatch.tsx exporting OptionSwatch). One component per file.
  • Hooks: camelCase starting with 'use' (e.g. useOptionGroup.ts exporting useOptionGroup).
  • Types: kebab-case with .types.ts suffix (e.g. option-schema.types.ts).
  • Feature Folders: lowercase singular (e.g. configurator, checkout).
  • Asset Styles: lowercase (e.g. index.css).
SEO Title: React File and Folder Naming Standards
SEO Description: Coding standards for React component files, hook filenames, types, and directories in Aircada projects.
Index Alternates:file conventionsnaming rulesfolder singulars