# 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.

## Links

- Related to [ADR 0012](0012-scss-bootstrap-import-deprecation.md)