DEV Community

Cover image for Atomic Design: The 5 Secrets to Taming UI Chaos in React

Posted on

Atomic Design: The 5 Secrets to Taming UI Chaos in React

Atomic design is a methodology for designing user interfaces that has been gaining popularity among developers in recent years. It allows developers to break down complex UI elements into smaller, reusable components, making the development process more efficient and manageable. This article will cover the 5 fundamentals of atomic design that are essential for implementing the methodology in a React application.

  1. Atoms: The Building Blocks of UI Atoms are the smallest and most basic building blocks of a user interface. Examples of atoms include buttons, form inputs, and text. Atoms are used to create the foundation for the UI and can be combined to form more complex components.
//Example of a button atom component in React
import React from "react";

const ButtonAtom = (props) => {
  return (
    <button className={props.className}>{props.children}</button>

export default ButtonAtom;
Enter fullscreen mode Exit fullscreen mode
  1. Molecules: A Combination of Atoms Molecules are slightly more complex than atoms and are composed of multiple atoms. For example, a form that contains several form inputs would be considered a molecule. By combining atoms to form molecules, developers can create more complex UI elements without having to start from scratch.
//Example of a form molecule component in React
import React from "react";
import ButtonAtom from "./ButtonAtom";
import InputAtom from "./InputAtom";

const FormMolecule = (props) => {
  return (
    <form className={props.className}>
      <InputAtom type="text" placeholder="Username" />
      <InputAtom type="password" placeholder="Password" />

export default FormMolecule;
Enter fullscreen mode Exit fullscreen mode
//Example file structure for an atomic design
|- components/
|  |- atoms/
|  |  |- ButtonAtom.js
|  |  |- InputAtom.js
|  |- molecules/
|  |  |- FormMolecule.js
|  |- organisms/
|  |- templates/
|  |- pages/
Enter fullscreen mode Exit fullscreen mode
  1. Organisms: The Foundation of Layout Organisms are the foundation of the layout and organization of the user interface. They are made up of multiple molecules and are responsible for defining the layout and placement of UI elements on a page. For example, a header that contains a logo, a navigation menu, and a search bar would be considered an organism.
//Example of a header organism component in React
import React from "react";
import LogoMolecule from "./LogoMolecule";
import NavigationMolecule from "./NavigationMolecule";
import SearchMolecule from "./SearchMolecule";

const HeaderOrganism = (props) => {
  return (
    <header className={props.className}>
      <LogoMolecule />
      <NavigationMolecule />
      <SearchMolecule />

export default HeaderOrganism;
Enter fullscreen mode Exit fullscreen mode
  1. Templates are used to define the structure of a page and are made up of multiple organisms. They provide a blueprint for the layout of a page, and ensure that all pages in the application have a consistent structure. For example, a template could define the position of the header, footer, and main content area, allowing developers to focus on filling in the content for each page, rather than worrying about the layout.
import React from 'react';
import Header from './Header';
import Footer from './Footer';

const Layout = (props) => {
  return (
    <div className="layout">
      <Header />
      <Footer />

export default Layout;
Enter fullscreen mode Exit fullscreen mode

In this example, the Layout component acts as the wrapper for the template, and the Header and Footer components define the structure of the header and footer respectively. The props.children component allows developers to define the main content area of the page within the Layout component. To use the template, developers can wrap the content for each page in the Layout component, like this:

import React from 'react';
import Layout from './Layout';

const About = () => {
  return (
      <h1>About Us</h1>
      <p>Lorem ipsum dolor sit amet.</p>

export default About;
Enter fullscreen mode Exit fullscreen mode

By using templates in this way, developers can create pages that have a consistent structure, while also allowing for flexibility and customization of the main content area for each page.

That's it ! See U next level Doobs !

If you want to learn more about Atomic Design ? Go here Doobs !

Top comments (2)

brense profile image
Rense Bakker • Edited

While I do believe that atomic design is a good paradigm to think about your react components and their responsibilities, I am not a fan of actually creating subfolders with atoms, molecules, organisms etc. Its way to generic for an enterprise application and it doesn't help you to find what you're looking for when you're searching for something like a ProductListItem component for example. Is it a molecule? Is it an atom? And in big application those atom and molecule folders are going to be huge unless you again devide them into features, which is what you should be doing in the first place imho. I only see the atomic folder structure working well, if you're building generic UI component libraries that are going to be used by other teams in actual end-products. Atomic folder structure also violates the rule of keeping related things close together. A ProductListItem and a UserAvatar might both be atoms, but they're not related at all and thus should be far apart and not close together. A ProductListItem and ProductList are closely related, but in Atomic folder structure you would put them in separate folders.

rardooba profile image

I understand your reservations about using the "atoms," "molecules," and "organisms" sub-folder structure in the atomic design approach. However, I believe that this approach has many advantages in developing my applications.

For me, atomic design allows for better organization of application components by grouping them by functionality and identifying them based on their role in composing the page. This greatly facilitates component search and maintenance. Additionally, atomic design promotes a more consistent and homogeneous approach in designing the user interface. I like the semantic concept of the idea.

Regarding the concerns raised, atomic design can be adapted to meet specific needs by grouping components by functionality rather than design elements. As for the violation of the rule of keeping related items together, I believe this concern is less important than the advantages of atomic design. By grouping components into design elements, we can ensure that components are reusable and modular, saving time and effort in development. This is just my opinion, of course, and it will depend on each individual's habits.