Skip to main content
The Angular Material Component Development Kit (CDK) is a set of behavior primitives for building UI components. It provides a foundation for developing high-quality, accessible Angular components without enforcing a specific visual design.

​
What is the CDK?

The CDK is a collection of well-tested tools that help you build custom components with:
  • Accessibility: Built-in support for screen readers, keyboard navigation, and focus management
  • Portability: Create reusable components that work across different contexts
  • Flexibility: No opinionated styles - bring your own design system
  • Performance: Optimized for production applications

​
Installation

npm install @angular/cdk

​
Categories

The CDK is organized into three main categories:

​
Common Behaviors

Utilities for implementing common interaction patterns:

​
Components

Unstyled component primitives:
  • Accordion - Expandable panels
  • Dialog - Modal dialogs
  • Listbox - Accessible listbox pattern
  • Menu - Context menus and menu bars
  • Stepper - Step-by-step workflows
  • Table - Data tables with sorting and pagination
  • Tree - Hierarchical tree structures

​
Utilities

Helper functions and tools:

​
Design Philosophy

The CDK is designed to be:
  1. Composable: Mix and match behaviors to create custom components
  2. Tree-shakeable: Only bundle what you use
  3. Framework-agnostic patterns: While built for Angular, the concepts apply broadly
  4. Production-ready: Used by Angular Material and thousands of applications

​
Getting Started

Import individual modules as needed: 
import {DragDropModule} from '@angular/cdk/drag-drop';
import {OverlayModule} from '@angular/cdk/overlay';
import {A11yModule} from '@angular/cdk/a11y';

@NgModule({
  imports: [DragDropModule, OverlayModule, A11yModule],
})
export class AppModule {}
Or use standalone imports: 
import {CdkDrag, CdkDropList} from '@angular/cdk/drag-drop';

@Component({
  standalone: true,
  imports: [CdkDrag, CdkDropList],
})
export class MyComponent {}

​
Next Steps

Explore the individual CDK modules to learn about specific behaviors and components. Each module provides detailed API documentation and usage examples.

Build docs developers (and LLMs) love

Get started for freeTalk to us