0Pricing
Frontend Academy · Lesson

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 — 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, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.tsx

Benefits

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.

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, and the Frontend Academy course includes 4 lessons in total. 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.

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; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

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

  1. Atomic Design: Atoms Molecules Organisms
  2. Monorepo Setup with Turborepo
  3. Micro-frontends: Module Federation
  4. Feature-Based Folder Structure
← Back to Frontend Academy