Atomic Component Principles
Atomic Component Principles
Atoms
The simplest building block
HTML tags
Not very useful on their own
Easily styled
Very reusable
Foundation of building a brand
Molecules
Groups of Atoms bonded together
Serve as backbone of design system
For example, a Search Form
Do one thing, do it well
Organisms
Groups of molecules
Distinct section of an interface
Portable, easily modified
Ecosystem
What the client will see
Connected containers
Many components that make up a view
Environment
Root Component
Typically the
<App />
componentRepresents everything packaged together as an application
Images from:
Brad Frosts's article, Atomic Design
Joey Di Nardo's article, Atomic Components: Managing Dynamic React Components using Atomic Design — Part 1.
Last updated