---
title: "Angular Material, CDK, and choosing UI primitives"
chapter: "14"
---

# Angular Material, CDK, and choosing UI primitives

Angular Material is a Material Design component library. The Angular CDK
provides lower-level behavior such as overlays, portals, drag/drop, focus,
scrolling, tables, and accessibility utilities.

## Keep majors aligned

Angular Material and CDK should normally match the Angular major. Update through
supported schematics and inspect theme, typography, density, and component API
changes.

## Material versus Flowbite

Material offers Angular-native components with deep CDK integration and a
defined visual system. Flowbite offers Tailwind-oriented markup, themes, and
JavaScript behaviors. CDK can underpin a custom Tailwind design system.

Choose one primary interaction ownership model for each component. Do not layer
a Flowbite modal controller over a Material dialog.

## Overlay

Overlay handles stacking, position, scroll strategies, backdrop, portals, and
cleanup. Use it for custom menus, tooltips, and dialogs when CDK behavior is
worth the dependency.

## Harnesses

Material/CDK component harnesses offer stable semantic testing APIs. Local
design-system components can provide their own harnesses or role-based testing
contracts.

## Theming

Map brand tokens deliberately. Do not mix Material theming, Flowbite theme
variables, and Tailwind colors without one source of truth.

## Feynman check

Flowbite is a styled component kit. Material is Angular-native Material Design.
CDK is an interaction toolbox. Explain which one owns focus and overlay
positioning in your dialog.