Organisms

What are Organisms?

Organisms are complex UI components composed of groups of molecules and/or atoms. They form distinct sections of an interface and are the first level where we see real functionality emerge.

Characteristics

• Complex - Combine multiple molecules/atoms
• Functional - Provide complete features
• Context-Aware - Understand their role in the interface
• Semi-Reusable - May be reused with variations
• Self-Sufficient - Contain everything needed for their purpose

Common Organisms

Header

---
import Logo from '@/components/atoms/Logo.astro';
import SearchBar from '@/components/molecules/SearchBar.astro';
import NavItem from '@/components/molecules/NavItem.astro';

const currentPath = Astro.url.pathname;
---

<header class="site-header">
  <div class="container">
    <Logo />

    <nav class="main-nav">
      <ul>
        <NavItem href="/" label="Home" active={currentPath === '/'} />
        <NavItem href="/about" label="About" active={currentPath === '/about'} />
        <NavItem href="/products" label="Products" active={currentPath === '/products'} />
      </ul>
    </nav>

    <SearchBar />
  </div>
</header>

Product Card

---
import { Image } from 'astro:assets';
import Badge from '@/components/atoms/Badge.astro';
import Button from '@/components/atoms/Button.astro';
import PriceTag from '@/components/molecules/PriceTag.astro';

interface Props {
  title: string;
  price: number;
  originalPrice?: number;
  image: string;
  featured?: boolean;
  inStock?: boolean;
}
---

<article class="product-card">
  {featured && <Badge variant="success">Featured</Badge>}

  <div class="image-container">
    <Image src={image} alt={title} width={300} height={300} loading="lazy" />
  </div>

  <div class="content">
    <h3>{title}</h3>
    <PriceTag price={price} originalPrice={originalPrice} />

    {inStock ? (
      <Button variant="primary">Add to Cart</Button>
    ) : (
      <Button variant="secondary" disabled>Out of Stock</Button>
    )}
  </div>
</article>

Footer

---
import NavItem from '@/components/molecules/NavItem.astro';
import SocialLink from '@/components/molecules/SocialLink.astro';
import FormField from '@/components/molecules/FormField.astro';
import Button from '@/components/atoms/Button.astro';
---

<footer class="site-footer">
  <div class="container">
    <div class="footer-section">
      <h3>Company</h3>
      <ul>
        <NavItem href="/about" label="About" />
        <NavItem href="/careers" label="Careers" />
        <NavItem href="/contact" label="Contact" />
      </ul>
    </div>

    <div class="footer-section">
      <h3>Follow Us</h3>
      <div class="social-links">
        <SocialLink platform="github" href="https://github.com" />
        <SocialLink platform="twitter" href="https://twitter.com" />
        <SocialLink platform="linkedin" href="https://linkedin.com" />
      </div>
    </div>

    <div class="footer-section">
      <h3>Newsletter</h3>
      <form>
        <FormField label="Email" name="email" type="email" required />
        <Button type="submit">Subscribe</Button>
      </form>
    </div>
  </div>
</footer>

Best Practices

Do’s

✅ Combine molecules and atoms purposefully ✅ Make organisms reusable where possible ✅ Handle complex interactions ✅ Include necessary state management ✅ Test organism functionality thoroughly ✅ Document organism props and usage

Don’ts

❌ Make organisms too large or complex ❌ Mix unrelated functionality ❌ Hardcode data that should be props ❌ Forget responsive design ❌ Skip accessibility testing