ui-organism

An organism in atomic design is a complex, self-contained UI feature section like a header or product grid. You need it when a component must compose molecules, manage state, fetch data, and handle responsive breakpoints independently.

To separate molecule and organism boundaries, assign presentational logic to molecules while encapsulating state management, data fetching, and responsive orchestration within the organism to maintain clear data flow and component reusability.

Handle loading and error states in feature-level UI components by defining clear data flow and error handling within the organism, ensuring it manages its own data fetching and renders appropriate loading, error, or empty states autonomously.

The best way to connect state management to complex UI sections is to model them as organisms that act as the boundary between presentational and container logic, directly owning their state connection and data fetching logic.

You should not use an organism if a UI section lacks complex state management, data fetching, or responsive orchestration needs. Simpler presentational components should remain molecules or atoms to avoid unnecessary architectural overhead.