Overview
Angular Material is the official component library from the Angular team at Google, implementing Material Design for Angular applications. The angular/components repository has existed since January 2016 and also publishes @angular/cdk (the Component Dev Kit), @angular/aria, @angular/google-maps and @angular/youtube-player.
Setup uses the Angular CLI: ng add @angular/material installs Material and the CDK, asks you to pick a prebuilt or custom theme and whether to apply global typography, and adds the Roboto font and Material icon font to index.html. Components are standalone and imported where used (for example MatSlideToggle). Schematics can also generate starter navigation, table and address-form components.
Theming is done with Sass and design tokens following Material Design, and the prebuilt themes cover common color pairs. For teams that want Angular's accessibility behaviour without Material's look, the CDK provides lower-level building blocks and @angular/aria provides headless directives implementing WAI-ARIA patterns. With PrimeNG moving to a commercial licence in 2026, Angular Material is the main free, officially maintained option for Angular.
Pricing and plans
| Plan | Price | What you get |
|---|---|---|
| Open source | Free | MIT licence |
What it does
- Material components
- Form controls, navigation, layout, buttons, popups, data table, paginator, sort, tree and more.
- Component Dev Kit
- Overlays, drag and drop, virtual scrolling, a11y utilities and other primitives for custom components.
- @angular/aria
- Headless directives that implement common WAI-ARIA patterns.
- Schematics
- ng add setup plus generators for nav, table and address-form starters.
- Theming
- Prebuilt themes or custom themes with Sass and design tokens.
Strengths and limitations
Strengths
- Official, maintained by the Angular team
- Versioned alongside Angular for smooth upgrades
- CDK and aria packages for custom design systems
- Free under MIT
Limitations
- Angular only
- Material Design look; significant restyling takes Sass theming work
- Fewer high-level components (no charts or rich data grid) than commercial suites
- ng add changes global styles and adds Google-hosted fonts by default
Who it suits
Good for
- Angular enterprise and internal apps
- Teams wanting an officially supported library
- Building a custom Angular design system on the CDK
Look elsewhere if
- Non-Angular projects
- Apps needing advanced grids or charts out of the box
Alternatives to Angular Material
| Tool | From | Free option | Stages |
|---|---|---|---|
| Base UI Unstyled accessible React components | — | ||
| Ant Design Enterprise React component library | — | ||
| PrimeReact React component suite (commercial licence from v11) | — | Free tier | |
| Radix UI Unstyled accessible React primitives | — | ||
| PrimeVue Vue component suite (commercial licence from v5) | — | Free tier | |
| Vuetify Material Design component framework for Vue | — |
Questions
How do I install Angular Material?
Run ng add @angular/material in an Angular CLI project; it installs Material and the CDK and sets up a theme.
Is Angular Material free?
Yes. It is MIT-licensed and maintained by the Angular team.
What is the Angular CDK?
A package of behaviour primitives such as overlays, drag and drop and accessibility helpers for building your own components.
Sources read for this page