Building a Scalable Component System in Web Development

Defining a Component Hierarchy

After revisiting the atomic design methodology, I decided to simplify the approach and align it more closely with web development principles. Instead of sticking to the traditional "atoms," "molecules," and "organisms," I opted for a hierarchy that better communicates the role of each component:

1. Base Components: Foundational, reusable components that enhance core HTML elements.
2. Block Components: Composite components that combine Base Components to create reusable patterns.

I excluded more specialized sections like "Layouts" and "Pages" from the global system. These are better suited to feature-specific folders to keep the global system clean and maintainable.

Folder Structure

Here's the structure I use to organize my global components:

components/
├── base/
├── blocks/
├── ui/

• base/: For foundational components like buttons, inputs, or any enhanced versions of HTML elements.
• blocks/: For composite components that combine multiple base components.
• ui/: For ShadCN/UI components, which provide pre-built solutions for common patterns.

Feature-specific enhancements or specialized logic live in the corresponding feature folder, keeping the global structure simple and reusable.

Building the HyperlinkButton Component

One practical example of this system is the HyperlinkButton component. It combines functionality from a ShadCN Button and a Next.js Link to create a versatile button that supports both internal and external links.

Here’s the code:

import React from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";

type HyperlinkButtonProps = {
  url: string;
  label: string;
  isExternal?: boolean;
};

export const HyperlinkButton = ({
  url,
  label,
  isExternal = false,
}: HyperlinkButtonProps) => (
  <Button asChild>
    <Link
      href={url}
      target={isExternal ? "_blank" : undefined}
      rel={isExternal ? "noreferrer" : undefined}
    >
      {label}
    </Link>
  </Button>
);

Placement in the System

The HyperlinkButton component belongs in the base/ folder:

• Folder: components/base/buttons/
• File: HyperlinkButton.tsx

This placement ensures that the component is globally accessible and reusable across different features.

Using the HyperlinkButton

Here’s an example of how to use the HyperlinkButton component:

import { HyperlinkButton } from "@/components/base/buttons/HyperlinkButton";

const MyFeature = () => (
  <div>
    <HyperlinkButton url="/about" label="Learn More" />
    <HyperlinkButton url="https://external.com" label="Visit Site" isExternal />
  </div>
);

This approach keeps the HyperlinkButton reusable and feature-agnostic while allowing feature-specific customization in individual folders if needed.

Key Takeaways

1. Simplify Your Hierarchy: Focus on a two-tier system (Base and Block) for global components to reduce complexity.
2. Encapsulate Feature-Specific Logic: Use feature folders to customize global components without cluttering the global system.
3. Enhance Reusability: Design foundational components like HyperlinkButton to be versatile and adaptable across different features.

By structuring your components with scalability and maintainability in mind, you can streamline your development process and create a more robust system. This structure has worked well for my projects, and I hope it helps you organize your own component library effectively!

Share Your Thoughts! I’d love to hear your feedback on this approach. Do you agree with the simplified hierarchy, or do you have alternative suggestions? Feel free to share your thoughts in the comments section below. Also, check out Brad Frost’s blog on Atomic Design for more insights on component-based methodologies. After reading, let me know your take on how these ideas compare!