Atomic Design: Atoms Molecules Organisms
Categorise components into atoms, molecules, organisms, templates, and pages to create a shared vocabulary between design and engineering.
Atomic Design: Atoms Molecules Organisms is a free Frontend Academy lesson on CoddyKit. This is lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, and your progress syncs across the web and the CoddyKit app. The Frontend Academy course includes 4 lessons in total.
What Is Atomic Design?
Atomic Design (Brad Frost, 2013) is a mental model for organising UI components into five levels of complexity: Atoms, Molecules, Organisms, Templates, and Pages. It gives designers and engineers a shared vocabulary.
Atoms — The Smallest Building Blocks
Single-purpose components that can't be broken down further. Buttons, input fields, icons, labels, colour swatches. They're abstract and reusable in any context.
// Atoms (examples)
<Button variant="primary">Save</Button>
<Input type="email" name="email" />
<Icon name="chevron-right" />
<Label htmlFor="email">Email</Label>Molecules — Simple Component Groups
Combine atoms to do something useful. A SearchBar is an Input + Button + Icon. A FormField is a Label + Input + ErrorMessage. Still general-purpose.
function SearchBar({ onSearch }) {
return (
<div className="search-bar">
<Input placeholder="Search..." />
<Button onClick={onSearch}>
<Icon name="search" />
</Button>
</div>
);
}Organisms — Complex Sections
Larger compositions that form distinct sections of an interface: a Header (logo + nav + search bar + user menu), a ProductCard (image + title + price + button), a SignupForm. More context-aware.
function Header({ user }) {
return (
<header>
<Logo />
<Navigation links={navLinks} />
<SearchBar onSearch={handleSearch} />
<UserMenu user={user} />
</header>
);
}Templates — Page Skeletons
Wireframe-level layouts that arrange organisms with no real content. A BlogTemplate has a Header, a Main with Article slots, and a Sidebar.
function BlogTemplate({ header, article, sidebar, footer }) {
return (
<div className="blog-layout">
{header}
<div className="main">
<main>{article}</main>
<aside>{sidebar}</aside>
</div>
{footer}
</div>
);
}Pages — Real Content
Templates with real content. The /blog/[slug] page renders BlogTemplate with the actual post, sidebar widgets, and chrome.
Folder Structure
Many teams organise components by level.
src/components/
atoms/
Button.tsx
Input.tsx
Icon.tsx
molecules/
SearchBar.tsx
FormField.tsx
organisms/
Header.tsx
ProductCard.tsx
templates/
BlogTemplate.tsx
pages/
BlogPage.tsxBenefits
Shared vocabulary between designers and developers. Encourages composition over duplication. Makes design systems easier to build. Promotes thinking about the smallest reusable unit first.
Criticism: Strict Categorisation Is Hard
In practice, the line between molecule and organism is blurry. Many teams end up with arguments about where something belongs — defeating the goal of clarity.
Modern Alternative: Feature-Based
Many large React/Vue codebases prefer organising by feature (auth/, checkout/, dashboard/) over strict atomic levels. Atomic still works for the shared design-system layer.
Atomic in Storybook
Storybook adapts well to atomic design — top-level categories Atoms, Molecules, Organisms make the component library easy to browse.
When to Use Atomic Design
Best for: design-system libraries shared across multiple apps, large teams that need a shared mental model, projects with active designer involvement. Skip for: small apps, prototypes, feature-heavy SPAs where colocation matters more.
Quick Check
In Atomic Design, what kind of component is a SearchBar built from an Input + Button + Icon?
Recap: Atomic Design
Five levels: Atoms (Button, Input, Icon), Molecules (SearchBar, FormField), Organisms (Header, ProductCard), Templates (layouts), Pages (real content). Shared vocabulary, composition-first thinking. Folder structure mirrors the layers. Best for shared design systems; feature-based folders often beat atomic for app code.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 41
- Lessons
- 163
Frequently Asked Questions
Is the “Atomic Design: Atoms Molecules Organisms” lesson free?
Yes — the full text of “Atomic Design: Atoms Molecules Organisms” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO. The Frontend Academy course includes 4 lessons in total.
What will I learn in “Atomic Design: Atoms Molecules Organisms”?
Categorise components into atoms, molecules, organisms, templates, and pages to create a shared vocabulary between design and engineering. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
How long does the “Atomic Design: Atoms Molecules Organisms” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Atomic Design: Atoms Molecules Organisms
- Monorepo Setup with Turborepo
- Micro-frontends: Module Federation
- Feature-Based Folder Structure