creational

Abstract Factory

Provide an interface for creating families of related objects without specifying their concrete classes.

Problem

creational

Client code needs to create families of related objects, but hardcoding concrete classes makes the code rigid and hard to swap.

Integration notes

Abstract Factory is especially useful when your app must produce matching sets of related objects for a theme, provider, platform, or pipeline.

Tradeoffs

  • Adds an extra abstraction layer.
  • Can overcomplicate simple object creation.
  • Makes family-wide swapping and consistency much easier.

Languages

typescript, java, python, react, angular, csharp, dotnet

Platforms

applications, ui systems, integration layers

Variants

frontend

Theme system factory

typescript

Create matching UI component families for a selected visual theme.

Intent: Keep themed UI components consistent across a screen or application.

Problem: Theme-specific components become inconsistent when each one is created independently.

Solution: Use Abstract Factory to create an aligned set of themed UI objects.

Dependencies

abstract-factory

Related variants

abstract-factory-provider-kitabstract-factory-platform-kit

Examples

abstract-factory

Useful for design systems, theming engines, and component libraries.

Scenarios

UI theme kit

An abstract factory creates matching UI controls such as buttons, inputs, and dialogs for a light or dark theme.

Context: A design system needs to produce consistent component families across themes.

Problem: Creating themed components one by one leads to inconsistent styling and scattered conditionals.

Solution: Use Abstract Factory to create a family of related UI controls through a single theme factory.

frontend

Language examples

Core languages

Frameworks and libraries

Typescripttypescript
TypeScript
type Button = { label: string; theme: string };
type Input = { placeholder: string; theme: string };

type ThemeFactory = {
  createButton(): Button;
  createInput(): Input;
};

class LightThemeFactory implements ThemeFactory {
  createButton() {
    return { label: "Light Button", theme: "light" };
  }

  createInput() {
    return { placeholder: "Light input", theme: "light" };
  }
}

class DarkThemeFactory implements ThemeFactory {
  createButton() {
    return { label: "Dark Button", theme: "dark" };
  }

  createInput() {
    return { placeholder: "Dark input", theme: "dark" };
  }
}

Real-world examples

  • Themed component kits: Generate matching buttons, inputs, and dialog styles from one theme-aware factory.
  • Cloud provider integrations: Create coordinated storage, queue, and compute clients for one provider without leaking vendor logic.
  • Platform-specific app shells: Build the correct object family for mobile, tablet, or desktop from one abstract factory.