The Three-Layer UI Component Architecture: Versatile Building Blocks for Crafting Multiple Design Systems

Creating custom component libraries for multiple products or applications can be challenging, particularly for companies that need to maintain two or more different design systems. The Three Layer UI Component Architecture is an attempt to solve this problem. This approach helps us maintain reusable components that serve as building blocks for multiple design systems.

TL;DR

• The Three-Layer UI Component Architecture helps create multiple design systems by utilizing reusable components.
• The architecture consists of three layers: 1) Unstyled Primitives, 2) Styled Primitives, and 3) Domain-specific Components.
• Unstyled Primitives serve as the foundation, while we design Styled Primitives according to the design system. Domain-specific Components address unique challenges in the problem domain.
• The approach offers advantages such as enhanced reusability, scalability, and maintainability.
• However, it also has cons like a learning curve and additional complexity due to duplication between layers 1 and 2.
• This architecture is not a perfect fit for all projects, especially smaller ones with a single design system.

The Layers of the Three Layer UI Component Architecture:

1. Unstyled Primitives: unstyled, accessible components
2. Styled Primitives: basic UI components, styled according to the design system
3. Domain-specific Components: components solving domain problems

Layer 1: Unstyled Primitives – The Foundation

Unstyled Primitives serve as the cornerstone for a component library built upon the principles of the Three-Layer Architecture. They are themeable, accessible components that we can style using Tailwind CSS or custom CSS classes. Libraries like Radix (React) and Headless UI (React and Vue.js) provide a great starting point for creating Unstyled Primitives. These components serve as the building blocks for the subsequent layers in the architecture.

Unstyled Primitives encompass a variety of foundational components, such as accordions, dialogs, dropdowns, selects, popovers, and tabs, among others. These elements are crucial as building blocks in constructing a highly flexible UI component library.

Layer 2: Styled Primitives – Basic UI Components Pre-styled in Accordance with the Design System

Styled Primitives are the next layer in the architecture. We style the essential UI components in this layer according to our design system(s). Some Styled Primitives, though not all, are essentially the counterparts of Unstyled Primitives, styled to match the design system in use.

Styled Primitives cover all essential UI components to build a typical application, such as buttons, inputs, other form elements, and notifications. In addition, they also include the styled variants of Layer 1 components, which we adapt to match the design system.

Layer 3: Domain-specific Components – Problem Solvers Tailored to Our Application

Domain-specific Components are the final layer in the architecture. These components solve problems specific to the type of application we are building. They are reusable components tailored to address the challenges unique to our problem domain (e.g., product cards and lists for an e-commerce application).

Domain-specific Components comprise a diverse set of components tailored to our particular needs. For example, imagine building an e-commerce application. In this case, we might create a shopping cart, product card, and other e-commerce-specific components in this layer. Typically, this layer may include card components designed for specific entities within our problem domain, catering to a project’s unique requirements. These components form the top layer of the Three-Layer UI Component Architecture, providing essential functionality to meet specific domain needs.

Pros, Cons, and Limitations of the Three-Layer UI Component Architecture

By understanding this approach’s pros, cons, and limitations, you can make an informed decision about whether it is the right solution for your projects.

Pros

• Enhanced reusability: This architecture allows for the reuse of components across different design systems, reducing development time and effort.
• Scalability: The layered architecture will enable us to quickly spin up a new branch in case the need for creating a new design system arises.
• Maintainability: Separating layers by reusability ensures that components remain modular and easy to maintain.

Cons

• Learning curve: Knowing which types of components belong in which layer might not be evident to everyone immediately.
• Additional complexity: Maintaining three layers introduces additional complexity due to the duplication between Layers 1 and 2.

Limitations

• Not suitable for all projects: This architecture is unsuitable for small projects or projects with a single design system.

Wrapping It Up

The Three Layer UI Component Architecture is a powerful approach to building reusable components as a solid base for (potentially) many design systems. By clearly separating Unstyled Primitives from Styled Primitives from Domain-specific Components, it allows us to quickly create new components for higher layers based on the lower layer(s) components. It enables us to build a rock-solid foundation based on highly reusable components for the fast-paced creation of new applications, each of which we can base on a different design system.