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
<Form>
<Label>Search</Label>
<Input />
</Form>
Molecules

Groups of Atoms bonded together
Serve as backbone of design system
For example, a Search Form
Do one thing, do it well
<Form onSubmit={ onSubmit }>
<Label>Search</Label>
<Input type="text" value={ search } />
<Button type="submit">Search</Button>
</Form>
Organisms

Groups of molecules
Distinct section of an interface
Portable, easily modified
<Header>
<Navigator>
<Brand />
<NavItem to="home">Home</NavItem>
<NavItem to="about">About</NavItem>
<NavItem to="blog">Blog</NavItem>
</Navigator>
<SearchForm />
</Header>
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
Was this helpful?