Atomic Design: Molecules

Master the creation of molecule components - functional groups of atoms that work together as a unit. Molecules combine multiple atoms to create more complex, purposeful UI elements.

What Are Molecules?

Molecules are the first level of composition in Atomic Design. They are:

• Composed of atoms only: Never include other molecules
• Single purpose: Do one thing well
• Functional units: Atoms working together for a specific task
• Reusable: Used across different organisms and contexts
• Minimally stateful: May have limited internal state for UI concerns

Common Molecule Types

Form Molecules