Atomic Design gives component libraries a shared vocabulary for complexity: Atoms, Molecules, Organisms, Templates, and Pages. This lesson covers what belongs at each level, with a Header and SearchBar example showing how the pieces combine.
1A Formal Vocabulary for Component Complexity
Atomic Design, originally a design-systems methodology by Brad Frost, provides a shared vocabulary for component complexity levels: Atoms, Molecules, Organisms, Templates, and Pages. It isn't React-specific, but maps naturally onto how a component library gets organized.
2Atoms: The Smallest Building Blocks
Atoms are the smallest, indivisible UI elements — a Button, an Input, a Label — typically accepting props for styling variants but with no awareness of any larger surrounding context.
3Molecules: Atoms Combined for One Job
A Molecule combines a small number of Atoms to accomplish one specific job — a SearchBar combining an Input and a Button into a single functional unit — remaining relatively simple and reusable, one step up in complexity from a single Atom.
4Organisms: Complex, Distinct Sections
An Organism combines Molecules and Atoms into a complex, distinct section of an interface — a page Header combining a logo, a SearchBar molecule, and a NavMenu molecule is a classic Organism: substantial and recognizable, but still reusable across different pages.
5Templates and Pages: Layout, Then Real Data
A Template arranges Organisms into a page's layout using placeholder content, defining structure without real data. A Page is that same Template filled with actual content, separating 'what the layout looks like' from 'what specific data this instance displays'.
6Step-by-Step Breakdown
A Formal Vocabulary for Component Complexity. Atomic Design, originally a design-systems methodology by Brad Frost, gives you a shared vocabulary for component complexity: Atoms, Molecules, Organisms, Templates, and Pages. It's not React-specific, but it maps naturally onto how a component library gets structured.
Atoms: The Smallest Building Blocks. Atoms are your smallest, indivisible UI elements — a Button, an Input, a Label, an Icon. They typically accept props for styling variants but have no awareness of any larger context; a Button doesn't know or care if it's inside a form or a modal.
Why is a Button component considered an 'Atom' in Atomic Design terms?
- →It's a smallest, indivisible UI element with no awareness of larger context
- →Its file is always the smallest file size in the codebase
Molecules: Atoms Combined for One Job. A Molecule combines a small number of Atoms to do ONE specific job — a SearchBar might combine an Input and a Button Atom into a single functional unit. Molecules are still relatively simple and reusable, just one step up in complexity from a single Atom.
Organisms: Complex, Distinct Sections. An Organism combines Molecules and Atoms into a complex, distinct section of an interface — a page's Header (logo Atom + SearchBar Molecule + NavMenu Molecule) is a classic Organism: substantial, recognizable, but still reusable across different pages.
A page's Header, combining a Logo, a SearchBar, and a NavMenu, is an example of which Atomic Design level?
- →An Organism — a complex, distinct, but still reusable section
- →An Atom — the smallest indivisible building block
Templates and Pages: Layout, Then Real Data. A Template arranges Organisms into a page's layout using placeholder content — it defines structure without real data. A Page is that same Template filled with actual, real content. This split separates 'what does the layout look like' from 'what specific data does this instance show'.
Mastery Achieved. You now understand Atomic Design: Atoms as the smallest context-free building blocks, Molecules combining a few Atoms for one job, Organisms as complex reusable sections, and the Template/Page split between layout structure and real content. Next, you'll learn Barrel Exports for cleaning up how these components get imported.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
This is a component organization methodology, not a browser feature.
Fully applicable.
Fully applicable.
Fully applicable.
Accessibility (A11y)
1Bake Accessibility Into Atoms So It Propagates Upward
Since Molecules and Organisms are built from Atoms, ensuring every Atom (Button, Input, Label) is correctly accessible by default means every larger component built from them inherits that correctness automatically.
SEO Implications
- 1
Atomic Design Has No Direct SEO Effect
This is a component organization methodology affecting developer experience and reuse, with no direct bearing on server-rendered content or crawlability.
Best Practices
Keep Atoms Genuinely Context-Free
An Atom that starts depending on knowledge of its surrounding page or feature has stopped being a true Atom — push that context-dependent logic up into the Molecule or Organism that uses it.
Don't Force Every Component Into a Strict Level
Atomic Design is a useful vocabulary and mental model, not a rigid classification every single component must fit perfectly — some components are genuinely ambiguous, and that's fine.
Frequent Bugs
A supposedly reusable Button 'Atom' breaks when used in a new part of the app.
The Button likely has hidden dependencies on its surrounding context (like assuming it's always inside a specific form or a specific CSS scope), which violates the Atom principle of being context-free. Remove that coupling so it works identically anywhere it's used.
It's unclear whether a new component should be a Molecule or an Organism.
A rough guideline: if it combines only a couple of Atoms for one narrow job, it's a Molecule; if it combines several Molecules/Atoms into a substantial, recognizable section of the page, it's an Organism. When genuinely ambiguous, don't over-think it — the classification is a helpful guide, not a strict requirement.
Real-World Examples
Structuring a Component Library with Atomic Design
A design system organizes its component library using Atomic Design vocabulary: Button, Input, and Avatar as Atoms; SearchBar and UserMenuItem as Molecules combining those Atoms; and Header and ProductCard as Organisms combining Molecules and Atoms into complete, recognizable sections used across many pages.
// Atoms
function Button({ variant, children }) { ... }
function Input({ ...props }) { ... }
// Molecule: combines Input + Button
function SearchBar({ onSearch }) { ... }
// Organism: combines Logo + SearchBar + NavMenu
function Header() { ... }