React Component Architecture

This diagram outlines the structure and dependencies of the React components in the web application.

React pages, feature components, UI components, stores and external libraries with their dependencies

(2025-04-13)

Notes:

  • This diagram is based on the files analyzed. There might be other components or dependencies not captured here.

  • Dependencies for UI components like Badge are included even if not directly seen in the analyzed parent components, assuming they exist for completeness.

  • Some dependencies between stores and UI components (like UIStore → Sonner or Notifications → UIStore) are inferred based on common patterns.

  • Colors mark the layer: pages, layout components, feature components, UI components, stores, and external libraries.

  • Source: docs/modules/nextjs/images/diagrams/react-component-architecture/react-component-architecture.mmd. After editing it, run pnpm diagrams:generate from site-nextjs/ and commit the regenerated SVGs. See Adaptive themed diagrams.