Files
adastra_app/docs/decisions/0003-dual-ui-library-progressive-migration.md
julien c8e2fba13e docs(adr): convert all ADRs to MADR 2.1.2 format
Rewrites all 12 frontend ADRs from a custom structure to the MADR 2.1.2
template required by the VS Code ADR Manager extension: bullet metadata
(Status/Date), standardised section headings, "Chosen option: X, because Y"
wording, and explicit Pros/Cons blocks per option.
2026-04-26 16:50:34 +02:00

2.1 KiB

Coexist Angular Material and Bootstrap during UI library consolidation

  • Status: accepted
  • Date: 2026-04-26

Context and Problem Statement

The application currently uses two UI libraries: Angular Material (interactive components) and Bootstrap 5 (layout, spacing utilities). Bootstrap was the original styling layer; Angular Material was introduced incrementally. Maintaining both increases bundle size, creates styling inconsistencies, and adds cognitive overhead. Which strategy should be adopted?

Considered Options

  • Keep both libraries and consolidate later
  • Consolidate to Angular Material only
  • Consolidate to Bootstrap only
  • Migrate to a different library (PrimeNG, Spartan/shadcn-angular, etc.)

Decision Outcome

Chosen option: "Keep both libraries and consolidate later", because a big-bang UI rewrite is not justified at this stage and the final target library has not yet been chosen.

Positive Consequences

  • No immediate rewrite required — development velocity is preserved.
  • Each library covers the other's gaps during the transition period.

Negative Consequences

  • Two styling systems in tension, leading to inconsistent UX.
  • Bootstrap's @import-based Sass is incompatible with the @use module system, requiring a deprecation workaround (see ADR 0012).
  • Larger CSS bundle than a single-library solution.

Pros and Cons of the Options

Keep both libraries and consolidate later

  • Good, because no rewrite cost now.
  • Bad, because styling inconsistency and larger bundle persist until consolidation.

Consolidate to Angular Material only

  • Good, because single coherent design system.
  • Bad, because Bootstrap layout utilities would need to be replaced.

Consolidate to Bootstrap only

  • Good, because removes Angular Material dependency.
  • Bad, because Angular Material components (dialogs, date pickers, etc.) would need rebuilding.

Migrate to a different library

  • Good, because could address limitations of both current libraries.
  • Bad, because highest rewrite cost; unknown tradeoffs until evaluated.