Atomic Design is a methodology for creating design systems by breaking down UI components into smaller, reusable parts. It’s divided into five levels: Atoms, Molecules, Organisms, Templates, and Pages. Each level builds on the previous one, promoting modularity and reusability. Here's how you can apply Atomic Design principles to component creation:

1. Atoms

• Definition: The smallest possible components, such as buttons, input fields, labels, or icons.

• Best Practices:

  • 🎯 Focus on single responsibility: Each atom should have one clear purpose.
  • Atoms should be highly reusable and used in various contexts.
  • Use consistent styling with utility-first CSS frameworks (like Tailwind CSS).
  • Maintain accessibility standards (e.g., aria-labels, keyboard navigability). See the Accessibility Best Practice
  • Examples component to atoms level: <Button>, <Input>, <Icon>.

• Example component code :

  const Button = ({ label, onClick, isLoading, isDisabled, variant = 'primary' }) => {
    const baseClass = 'px-4 py-2 rounded-lg font-semibold text-white transition-colors';
    const variantClass = variant === 'secondary' ? 'bg-gray-500 hover:bg-gray-600' : 'bg-blue-500 hover:bg-blue-600';
  
    return (
      <button
        onClick={onClick}
        disabled={isDisabled || isLoading}
        className={`${baseClass} ${isDisabled ? 'bg-gray-400 cursor-not-allowed' : variantClass}
          ${isLoading ? 'bg-blue-300 cursor-wait' : ''}`}
      >
        {isLoading ? 'Loading...' : label}
      </button>
    );
  };
  

<aside> 💡

Atoms can contain other atoms as long as the component as a whole still functions as a single, indivisible element in the design system.

</aside>

2. Molecules

• Definition: Combinations of atoms that work together to form simple components.

• Best Practices:

  • Molecules should be composable and flexible for different use cases.
  • They should handle basic user interactions, such as form validation or hover effects.
  • ⚠️ Prop drilling should be minimal. Keep molecules generic but customizable via props.
  • Examples: <SearchBar> (a combination of an input and a button), <FormField> (label + input).

• Example component code :

  // FormField.js (Molecule)
  import React from 'react';
  import InputField from './InputField';  // Atom
  import Label from './Label';            // Atom
  
  const FormField = ({ label, type, name, value, onChange, isDisabled }) => {
    return (
      <div className="mb-4">
        <Label htmlFor={name}>{label}</Label>
        <InputField
          type={type}
          name={name}
          value={value}
          onChange={onChange}
          isDisabled={isDisabled}
        />
      </div>
    );
  };
  
  export default FormField;
  

3. Organisms

• Definition: More complex components composed of molecules and atoms that form distinct sections of a UI.

• Best Practices:

  • Organisms should solve a specific business logic or UI 🎯problem, such as a navbar, card, or list.
  • 🎯 Focus on state management within the organism, delegating functionality to child components where needed.
  • Keep organisms modular to support different layouts and themes.
  • Examples: <Header>, <Footer>, <ProductCard>.

• Example Component Code :

  // LoginForm.js (Organism)
  import React, { useState } from 'react';
  import FormField from './FormField';        // Molecule
  import Button from './Button';              // Atom
  
  const LoginForm = ({ onSubmit }) => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [isLoading, setIsLoading] = useState(false);
  
    const handleEmailChange = (e) => setEmail(e.target.value);
    const handlePasswordChange = (e) => setPassword(e.target.value);
  
    const handleSubmit = (e) => {
      e.preventDefault();
      setIsLoading(true);
      onSubmit({ email, password }).finally(() => setIsLoading(false));
    };
  
    return (
      <form onSubmit={handleSubmit} className="w-full max-w-sm mx-auto">
        <FormField
          label="Email"
          type="email"
          name="email"
          value={email}
          onChange={handleEmailChange}
          isDisabled={isLoading}
        />
        <FormField
          label="Password"
          type="password"
          name="password"
          value={password}
          onChange={handlePasswordChange}
          isDisabled={isLoading}
        />
        <Button label="Login" isDisabled={!email || !password} isLoading={isLoading} />
      </form>
    );
  };
  
  export default LoginForm;
  
  

  4. Templates

  

  • Definition: Page-level skeletons that define layout structure without containing real content.

  • Best Practices:

    • Templates are a blueprint for page structure, combining organisms in specific layouts.
    • They should be flexible, allowing content swapping without changing the layout structure.
    • Use templates to manage layout consistency across pages.
    • Examples: <LandingPageTemplate>, <DashboardTemplate>.

  • Example component code

    // BasicTemplate.js (Template)
    import React from 'react';
    import Header from './Header';    // Organism
    import Footer from './Footer';    // Organism
    
    const BasicTemplate = ({children) => {
      return (
        <div className="min-h-screen flex flex-col bg-gray-100">
          <Header />
          <main className="flex-grow flex justify-center items-center">
    				{children}
          </main>
          <Footer />
        </div>
      );
    };
    
    export default BasicTemplate;
    

Footnote: