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.