@angular/cdk

What is @angular/cdk?

The @angular/cdk package, also known as Angular Component Dev Kit, provides a set of tools, components, and utilities for building complex material design components without depending on the Angular Material library. It is designed to be generic and reusable across different UI components.

What are @angular/cdk's main functionalities?

Layout

The Layout module provides utilities to build responsive layouts using the BreakpointObserver service.

import {LayoutModule} from '@angular/cdk/layout';

Overlay

The Overlay module helps in creating powerful overlay elements that can be attached to any part of the document.

import {OverlayModule} from '@angular/cdk/overlay';

Table

The Table module provides a flexible and extensible data-table for displaying tabular data.

import {CdkTableModule} from '@angular/cdk/table';

Drag and Drop

The DragDrop module allows for implementing drag-and-drop features in your application with ease.

import {DragDropModule} from '@angular/cdk/drag-drop';

Accessibility

The Accessibility module provides tools to make your application more accessible, including focus management and screen reader support.

import {A11yModule} from '@angular/cdk/a11y';

Other packages similar to @angular/cdk

react-dnd

React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping components decoupled. It is similar to the DragDropModule in @angular/cdk but for React.

react-virtualized

React Virtualized is a React component for efficiently rendering large lists and tabular data. It is similar to the Table module in @angular/cdk but specifically tailored for React applications.

popper.js

Popper.js is a library used to create poppers in web applications. It is similar to the Overlay module in @angular/cdk, providing a way to attach elements to the DOM and manage their positioning.

muuri

Muuri is a JavaScript layout engine that allows creating responsive, sortable, filterable, and draggable grid layouts. It is similar to the combination of the Layout and DragDrop modules in @angular/cdk.

README

Angular Material

The sources for this package are in the main Angular Material repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

20.2.0-next.2 "archerite-asparagus" (2025-07-30)

cdk

| Commit | Type | Description | | -- | -- | -- | | 88d4ffda6 | fix | drag-drop: incorrect index when returning item in mixed list (#31592) | | c386d0ee1 | fix | listbox: coerce tabindex value (#31597) |

material

| Commit | Type | Description | | -- | -- | -- | | 20e6e92c0 | feat | core: add an m2-theme API to define system vars (#31616) | | 3dfe50aef | fix | core: align gm3 colors (#31485) | | 993a9a393 | fix | core: fill in m2 system token values (#31615) | | 5d681219f | fix | core: use different prefix for m2-theme (#31621) | | 471d3237e | fix | radio: rendering artifacts at some zoom levels (#31612) | | 8576ccf1d | fix | schematics: set generated font family on body (#31618) | | 9e14c5566 | fix | slider: tick marks not showing dynamically (#31608) | | 9e25efb6f | fix | table: return undefined sort and paginator (#31593) | | 092c0f73d | fix | testing: Modify input filtering to more broadly search for (#31596) |

cdk-experimental

| Commit | Type | Description | | -- | -- | -- | | 647616e2e | fix | listbox: make CdkOption public (#31588) |

<!-- CHANGELOG SPLIT MARKER -->

<a name="20.1.4"></a>