Angular Material
Official Angular UI component library (Material Design) plus tools for building custom components.angular/components
- Stars
- 25k
- Forks
- 6.8k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
This is the official set of UI building blocks for Angular, the web framework from Google. It includes Material Design components such as those for common interface parts, and a toolkit (the CDK) for building your own custom components with shared interaction patterns. It is split into several npm packages, including @angular/aria for accessible headless directives and @angular/google-maps and @angular/youtube-player for embedding those services.
- Add Material-styled form fields, buttons, and dialogs to an Angular app
- Build a custom dropdown or menu using CDK interaction patterns
- Embed a Google Map or YouTube player as an Angular component
- Use headless accessible directives from @angular/aria to implement WAI-ARIA patterns
Great for
- Angular developers who want ready-made, accessible UI components
- Teams already following Material Design guidelines
- Developers building custom components who need common interaction logic from the CDK
- Projects that want components maintained alongside the Angular framework
Not ideal for
- Projects not using Angular, since these packages are built specifically for it
- Teams that need a non-Material visual style without customization effort, because the components are designed within Material Design bounds
- Beginners with no Angular experience, who should learn the framework first
How to get it
- 1
Install with a package manager
You'll need: Angular project (set up with the Angular CLI) · Node.js (version not specified in README)
Install Angular Material and CDK (from the Getting Started guide link; exact command not in README)
git clone https://github.com/angular/components - 2
Run it
- Read the Getting Started Guide at material.angular.dev/guide/getting-started
- Create or open an Angular project
- Install the package you need, such as @angular/material or @angular/cdk, following the guide
- Import a component into your Angular app and render it
- 3
Get the most out of it
- Use the CDK to build custom components with shared interaction patterns
- Use @angular/aria headless directives when you want accessibility behavior without Material styling
- Consult the Angular support policy page to plan upgrades alongside Angular releases
- Check the StackBlitz template linked in the README to try components without local setup
Downloads
Strengths
- Official project maintained by the Angular team at Google
- Stated goals include accessibility, internationalization, and thorough unit and integration testing
- Released under the MIT license with a clear support policy tied to Angular's release schedule
Trade-offs
- Only useful inside Angular projects
- Customization is described as working within the bounds of the Material Design specification
- README does not detail specific components or APIs; see the documentation site for those
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| components (this) | 25k | Library | intermediate | 4 days ago | Angular developers who want ready-made, accessible UI components |
| materialize | 38.8k | Library | beginner | 3 months ago | Developers building a web page or app who want a Material Design look quickly |
| Material | 12k | Library | intermediate | 4.5 years ago | iOS developers who want Material Design-style components without building them from scratch |
| quasar | 27.2k | Framework | intermediate | 18 days ago | Developers already familiar with Vue.js |
| framework7 | 18.8k | Framework | intermediate | 6 days ago | Developers who already know HTML, CSS and JavaScript and want to build mobile-style apps |
| MaterialDesignInXamlToolkit | 16.3k | Library | intermediate | 4 days ago | Developers building Windows desktop apps with WPF |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.