Skip to main content

Organisms​

Organisms are larger, self-contained sections of a user interface composed of multiple molecules and atoms working together to deliver a meaningful piece of functionality. They represent distinct areas of a page, such as a navigation bar, product card grid, login form, dashboard widget, or article header.

Unlike molecules, which focus on a single interaction, organisms coordinate multiple interactions and present a complete user-facing feature or section.

Rules for Organisms​

  • Be composed primarily of molecules and atoms.
  • Represent a meaningful section of the user interface.
  • May contain presentation and orchestration logic.
  • Avoid embedding complex business rules or domain logic.
  • Remain reusable across pages and templates where possible.
  • Have clear boundaries and responsibilities.
  • Expose a well-defined interface through props and events.
  • Be independently testable.

Examples​

  • Header (Logo + Navigation + Search)
  • Product List (Product Cards + Filters + Sorting)
  • Login Form (Form Fields + Validation + Submit Action)
  • User Profile Panel (Avatar + Details + Actions)
  • Dashboard Widget (Statistics + Charts + Controls)

Organisms are where individual building blocks start to form recognizable features, creating reusable sections that can be assembled into complete application screens.