Skip to content

Atomic Design

Atomic Design is a methodology introduced for designing and organizing UI components in a modular and scalable way. It breaks down user interfaces into five hierarchical levels:

  1. Atoms – Basic building blocks (e.g., buttons, inputs, labels, icons).
  2. Molecules – Small reusable UI combinations of atoms (e.g., a search bar consisting of an input field and a button).
  3. Organisms – More complex UI sections composed of molecules and/or atoms (e.g., a navigation bar or a card component).
  4. Templates – Page-level structures defining content layout, using organisms but without real data (e.g., a dashboard layout).
  5. Pages – Fully realized screens with real data and user-specific content.