React Component Folder Structure

When a component grows large with sub-components, organize it in a folder where the folder name matches the main component name.

Structure Overview

MainComponent/
  MainComponent.tsx      # Main component file
  components/            # Sub-components used directly by MainComponent
  shared/                # Shared utilities/components used by multiple tabs
  tabs/                  # Sub-domain folders (can be any grouping)

Real Example

DashboardPage/
  DashboardPage.tsx
  components/
    DatePicker/
    useDate.ts
  shared/
    DataTable/
    DeleteItemUseCase/
  tabs/
    OverviewTab/
    UsersTab/
    ActivityTab/

Key Principles

Folder name = Component name: The folder DashboardPage contains DashboardPage.tsx. This makes imports predictable.

components/: Contains sub-components and hooks used directly by the main component. These are implementation details of the main component.

shared/: Contains utilities and components shared across multiple sub-domain folders (like tabs). If DataTable is used by both OverviewTab and UsersTab, it goes here.

tabs/ (sub-domains): Group related sub-components by feature or domain. The folder name can be anything that makes sense for your context - tabs/, sections/, panels/, etc.

Recursive structure: Each sub-domain can follow the same pattern with its own components/.