What is Angular CDK (Component Development Kit)?

The Angular CDK provides primitive building blocks for building custom, high-quality UI components without prescribing a specific design language (unlike Angular Material which follows Material Design). Key CDK packages: (1) @angular/cdk/overlay: creates and manages floating UI elements (tooltips, dropdowns, modals) with configurable positioning strategies (flexible, global, connected). Handles: scroll strategies, position recalculation, backdrop, keyboard navigation; (2) @angular/cdk/portal: render components or templates dynamically at arbitrary DOM locations; (3) @angular/cdk/drag-drop: drag and drop with reordering: cdkDrag, cdkDropList, cdkDropListGroup. Handles sorting, transferring between lists, animations; (4) @angular/cdk/virtual-scroll: efficiently render large lists: <cdk-virtual-scroll-viewport itemSize="50"><app-item *cdkVirtualFor="let item of items"></app-item></cdk-virtual-scroll-viewport>. Only renders visible items; (5) @angular/cdk/a11y: accessibility utilities — FocusTrap (trap focus in modal), FocusMonitor (track keyboard vs mouse focus), ListKeyManager (keyboard navigation in lists), AriaDescriber; (6) @angular/cdk/breakpoints: responsive layout utilities — BreakpointObserver watches viewport changes; (7) @angular/cdk/table: generic table that Angular Material table is built on; (8) @angular/cdk/stepper, tree, accordion — behavioral components without styling; (9) @angular/cdk/clipboard, platform, observers — utilities. The CDK is separate from Angular Material — you can use CDK primitives to build your own design system.