Feedbacks
Built for
Angular MaterialTailwind CSS
🎉 Introducing Headings

Rapid Angular UI Development

With Pre-built Blocks & Powerful CLI

Choose your way

Copy, Paste & Go

Preview blocks in your browser and copy the code with a single click.

Explore Blocks

Build with CLI

Install, add, and update blocks effortlessly with our command-line interface.

Page Shell 1
Grid List 1
Login with Email & Password
Billing Usage 1
Nav With Page Header
Login with Email or Provider
Form Layout 1
File Upload 4
Feature Section 2
Page Shell 1
Grid List 1
Login with Email & Password
Billing Usage 1
Nav With Page Header
Login with Email or Provider
Form Layout 1
File Upload 4
Feature Section 2
Page Shell 1
Grid List 1
Login with Email & Password
Billing Usage 1
Nav With Page Header
Login with Email or Provider
Form Layout 1
File Upload 4
Feature Section 2
Page Shell 1
Grid List 1
Login with Email & Password
Billing Usage 1
Nav With Page Header
Login with Email or Provider
Form Layout 1
File Upload 4
Feature Section 2
Page Shell 1
Grid List 1
Login with Email & Password
Billing Usage 1
Nav With Page Header
Login with Email or Provider
Form Layout 1
File Upload 4
Feature Section 2
Nav With Page Header
Feature Section 6
Simple With Icons
With Comments
Form Layout 2
Grid List 2
File Upload 1
Page Shell 3
Nav With Page Header
Feature Section 6
Simple With Icons
With Comments
Form Layout 2
Grid List 2
File Upload 1
Page Shell 3
Nav With Page Header
Feature Section 6
Simple With Icons
With Comments
Form Layout 2
Grid List 2
File Upload 1
Page Shell 3
Nav With Page Header
Feature Section 6
Simple With Icons
With Comments
Form Layout 2
Grid List 2
File Upload 1
Page Shell 3
Nav With Page Header
Feature Section 6
Simple With Icons
With Comments
Form Layout 2
Grid List 2
File Upload 1
Page Shell 3
Filterbar 11
Account User Management 2
Grid List 4
Nav On Gray Background
Feature Section 7
Empty State 1
File Upload 2
Onboarding Feed 1
Page Shell 3
Filterbar 11
Account User Management 2
Grid List 4
Nav On Gray Background
Feature Section 7
Empty State 1
File Upload 2
Onboarding Feed 1
Page Shell 3
Filterbar 11
Account User Management 2
Grid List 4
Nav On Gray Background
Feature Section 7
Empty State 1
File Upload 2
Onboarding Feed 1
Page Shell 3
Filterbar 11
Account User Management 2
Grid List 4
Nav On Gray Background
Feature Section 7
Empty State 1
File Upload 2
Onboarding Feed 1
Page Shell 3
Filterbar 11
Account User Management 2
Grid List 4
Nav On Gray Background
Feature Section 7
Empty State 1
File Upload 2
Onboarding Feed 1
Page Shell 3
Form Layout 2
Banner 1
Feature Section 1
Page Shell 5
File Upload 3
Filterbar 7
Branded Nav with Compact Header
Grid List 6
Form Layout 2
Banner 1
Feature Section 1
Page Shell 5
File Upload 3
Filterbar 7
Branded Nav with Compact Header
Grid List 6
Form Layout 2
Banner 1
Feature Section 1
Page Shell 5
File Upload 3
Filterbar 7
Branded Nav with Compact Header
Grid List 6
Form Layout 2
Banner 1
Feature Section 1
Page Shell 5
File Upload 3
Filterbar 7
Branded Nav with Compact Header
Grid List 6
Form Layout 2
Banner 1
Feature Section 1
Page Shell 5
File Upload 3
Filterbar 7
Branded Nav with Compact Header
Grid List 6
File Upload 4
Login with Email & Password
Form Layout 1
Billing Usage 1
Login with Email or Provider
Page Shell 1
Nav With Page Header
Feature Section 2
Grid List 1
File Upload 4
Login with Email & Password
Form Layout 1
Billing Usage 1
Login with Email or Provider
Page Shell 1
Nav With Page Header
Feature Section 2
Grid List 1
File Upload 4
Login with Email & Password
Form Layout 1
Billing Usage 1
Login with Email or Provider
Page Shell 1
Nav With Page Header
Feature Section 2
Grid List 1
File Upload 4
Login with Email & Password
Form Layout 1
Billing Usage 1
Login with Email or Provider
Page Shell 1
Nav With Page Header
Feature Section 2
Grid List 1
File Upload 4
Login with Email & Password
Form Layout 1
Billing Usage 1
Login with Email or Provider
Page Shell 1
Nav With Page Header
Feature Section 2
Grid List 1
Form Layout 2
Page Shell 3
Simple With Icons
Nav With Page Header
With Comments
Feature Section 6
Grid List 2
File Upload 1
Form Layout 2
Page Shell 3
Simple With Icons
Nav With Page Header
With Comments
Feature Section 6
Grid List 2
File Upload 1
Form Layout 2
Page Shell 3
Simple With Icons
Nav With Page Header
With Comments
Feature Section 6
Grid List 2
File Upload 1
Form Layout 2
Page Shell 3
Simple With Icons
Nav With Page Header
With Comments
Feature Section 6
Grid List 2
File Upload 1
Form Layout 2
Page Shell 3
Simple With Icons
Nav With Page Header
With Comments
Feature Section 6
Grid List 2
File Upload 1
Account User Management 2
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
Feature Section 7
Empty State 1
Grid List 4
Page Shell 3
File Upload 2
Account User Management 2
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
Feature Section 7
Empty State 1
Grid List 4
Page Shell 3
File Upload 2
Account User Management 2
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
Feature Section 7
Empty State 1
Grid List 4
Page Shell 3
File Upload 2
Account User Management 2
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
Feature Section 7
Empty State 1
Grid List 4
Page Shell 3
File Upload 2
Account User Management 2
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
Feature Section 7
Empty State 1
Grid List 4
Page Shell 3
File Upload 2
File Upload 3
Form Layout 2
Branded Nav with Compact Header
Banner 1
Grid List 6
Filterbar 7
Page Shell 5
Feature Section 1
File Upload 3
Form Layout 2
Branded Nav with Compact Header
Banner 1
Grid List 6
Filterbar 7
Page Shell 5
Feature Section 1
File Upload 3
Form Layout 2
Branded Nav with Compact Header
Banner 1
Grid List 6
Filterbar 7
Page Shell 5
Feature Section 1
File Upload 3
Form Layout 2
Branded Nav with Compact Header
Banner 1
Grid List 6
Filterbar 7
Page Shell 5
Feature Section 1
File Upload 3
Form Layout 2
Branded Nav with Compact Header
Banner 1
Grid List 6
Filterbar 7
Page Shell 5
Feature Section 1
Feature Section 2
Page Shell 1
Grid List 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Nav With Page Header
File Upload 4
Form Layout 1
Feature Section 2
Page Shell 1
Grid List 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Nav With Page Header
File Upload 4
Form Layout 1
Feature Section 2
Page Shell 1
Grid List 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Nav With Page Header
File Upload 4
Form Layout 1
Feature Section 2
Page Shell 1
Grid List 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Nav With Page Header
File Upload 4
Form Layout 1
Feature Section 2
Page Shell 1
Grid List 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Nav With Page Header
File Upload 4
Form Layout 1
File Upload 1
Form Layout 2
Simple With Icons
Grid List 2
Nav With Page Header
Feature Section 6
Page Shell 3
With Comments
File Upload 1
Form Layout 2
Simple With Icons
Grid List 2
Nav With Page Header
Feature Section 6
Page Shell 3
With Comments
File Upload 1
Form Layout 2
Simple With Icons
Grid List 2
Nav With Page Header
Feature Section 6
Page Shell 3
With Comments
File Upload 1
Form Layout 2
Simple With Icons
Grid List 2
Nav With Page Header
Feature Section 6
Page Shell 3
With Comments
File Upload 1
Form Layout 2
Simple With Icons
Grid List 2
Nav With Page Header
Feature Section 6
Page Shell 3
With Comments
Filterbar 11
Nav On Gray Background
File Upload 2
Feature Section 7
Page Shell 3
Empty State 1
Account User Management 2
Grid List 4
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
File Upload 2
Feature Section 7
Page Shell 3
Empty State 1
Account User Management 2
Grid List 4
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
File Upload 2
Feature Section 7
Page Shell 3
Empty State 1
Account User Management 2
Grid List 4
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
File Upload 2
Feature Section 7
Page Shell 3
Empty State 1
Account User Management 2
Grid List 4
Onboarding Feed 1
Filterbar 11
Nav On Gray Background
File Upload 2
Feature Section 7
Page Shell 3
Empty State 1
Account User Management 2
Grid List 4
Onboarding Feed 1
Feature Section 1
Page Shell 5
Branded Nav with Compact Header
Grid List 6
File Upload 3
Form Layout 2
Banner 1
Filterbar 7
Feature Section 1
Page Shell 5
Branded Nav with Compact Header
Grid List 6
File Upload 3
Form Layout 2
Banner 1
Filterbar 7
Feature Section 1
Page Shell 5
Branded Nav with Compact Header
Grid List 6
File Upload 3
Form Layout 2
Banner 1
Filterbar 7
Feature Section 1
Page Shell 5
Branded Nav with Compact Header
Grid List 6
File Upload 3
Form Layout 2
Banner 1
Filterbar 7
Feature Section 1
Page Shell 5
Branded Nav with Compact Header
Grid List 6
File Upload 3
Form Layout 2
Banner 1
Filterbar 7
Page Shell 1
Login with Email or Provider
Login with Email & Password
Billing Usage 1
Grid List 1
File Upload 4
Form Layout 1
Nav With Page Header
Feature Section 2
Page Shell 1
Login with Email or Provider
Login with Email & Password
Billing Usage 1
Grid List 1
File Upload 4
Form Layout 1
Nav With Page Header
Feature Section 2
Page Shell 1
Login with Email or Provider
Login with Email & Password
Billing Usage 1
Grid List 1
File Upload 4
Form Layout 1
Nav With Page Header
Feature Section 2
Page Shell 1
Login with Email or Provider
Login with Email & Password
Billing Usage 1
Grid List 1
File Upload 4
Form Layout 1
Nav With Page Header
Feature Section 2
Page Shell 1
Login with Email or Provider
Login with Email & Password
Billing Usage 1
Grid List 1
File Upload 4
Form Layout 1
Nav With Page Header
Feature Section 2
Feature Section 6
Form Layout 2
Grid List 2
Nav With Page Header
With Comments
File Upload 1
Page Shell 3
Simple With Icons
Feature Section 6
Form Layout 2
Grid List 2
Nav With Page Header
With Comments
File Upload 1
Page Shell 3
Simple With Icons
Feature Section 6
Form Layout 2
Grid List 2
Nav With Page Header
With Comments
File Upload 1
Page Shell 3
Simple With Icons
Feature Section 6
Form Layout 2
Grid List 2
Nav With Page Header
With Comments
File Upload 1
Page Shell 3
Simple With Icons
Feature Section 6
Form Layout 2
Grid List 2
Nav With Page Header
With Comments
File Upload 1
Page Shell 3
Simple With Icons
File Upload 2
Grid List 4
Filterbar 11
Account User Management 2
Onboarding Feed 1
Feature Section 7
Nav On Gray Background
Empty State 1
Page Shell 3
File Upload 2
Grid List 4
Filterbar 11
Account User Management 2
Onboarding Feed 1
Feature Section 7
Nav On Gray Background
Empty State 1
Page Shell 3
File Upload 2
Grid List 4
Filterbar 11
Account User Management 2
Onboarding Feed 1
Feature Section 7
Nav On Gray Background
Empty State 1
Page Shell 3
File Upload 2
Grid List 4
Filterbar 11
Account User Management 2
Onboarding Feed 1
Feature Section 7
Nav On Gray Background
Empty State 1
Page Shell 3
File Upload 2
Grid List 4
Filterbar 11
Account User Management 2
Onboarding Feed 1
Feature Section 7
Nav On Gray Background
Empty State 1
Page Shell 3
Branded Nav with Compact Header
File Upload 3
Banner 1
Page Shell 5
Grid List 6
Form Layout 2
Feature Section 1
Filterbar 7
Branded Nav with Compact Header
File Upload 3
Banner 1
Page Shell 5
Grid List 6
Form Layout 2
Feature Section 1
Filterbar 7
Branded Nav with Compact Header
File Upload 3
Banner 1
Page Shell 5
Grid List 6
Form Layout 2
Feature Section 1
Filterbar 7
Branded Nav with Compact Header
File Upload 3
Banner 1
Page Shell 5
Grid List 6
Form Layout 2
Feature Section 1
Filterbar 7
Branded Nav with Compact Header
File Upload 3
Banner 1
Page Shell 5
Grid List 6
Form Layout 2
Feature Section 1
Filterbar 7
Login with Email or Provider
Login with Email & Password
Grid List 1
File Upload 4
Nav With Page Header
Feature Section 2
Page Shell 1
Form Layout 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Grid List 1
File Upload 4
Nav With Page Header
Feature Section 2
Page Shell 1
Form Layout 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Grid List 1
File Upload 4
Nav With Page Header
Feature Section 2
Page Shell 1
Form Layout 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Grid List 1
File Upload 4
Nav With Page Header
Feature Section 2
Page Shell 1
Form Layout 1
Billing Usage 1
Login with Email or Provider
Login with Email & Password
Grid List 1
File Upload 4
Nav With Page Header
Feature Section 2
Page Shell 1
Form Layout 1
Billing Usage 1
With Comments
File Upload 1
Nav With Page Header
Feature Section 6
Grid List 2
Page Shell 3
Simple With Icons
Form Layout 2
With Comments
File Upload 1
Nav With Page Header
Feature Section 6
Grid List 2
Page Shell 3
Simple With Icons
Form Layout 2
With Comments
File Upload 1
Nav With Page Header
Feature Section 6
Grid List 2
Page Shell 3
Simple With Icons
Form Layout 2
With Comments
File Upload 1
Nav With Page Header
Feature Section 6
Grid List 2
Page Shell 3
Simple With Icons
Form Layout 2
With Comments
File Upload 1
Nav With Page Header
Feature Section 6
Grid List 2
Page Shell 3
Simple With Icons
Form Layout 2
File Upload 2
Filterbar 11
Nav On Gray Background
Page Shell 3
Onboarding Feed 1
Feature Section 7
Account User Management 2
Empty State 1
Grid List 4
File Upload 2
Filterbar 11
Nav On Gray Background
Page Shell 3
Onboarding Feed 1
Feature Section 7
Account User Management 2
Empty State 1
Grid List 4
File Upload 2
Filterbar 11
Nav On Gray Background
Page Shell 3
Onboarding Feed 1
Feature Section 7
Account User Management 2
Empty State 1
Grid List 4
File Upload 2
Filterbar 11
Nav On Gray Background
Page Shell 3
Onboarding Feed 1
Feature Section 7
Account User Management 2
Empty State 1
Grid List 4
File Upload 2
Filterbar 11
Nav On Gray Background
Page Shell 3
Onboarding Feed 1
Feature Section 7
Account User Management 2
Empty State 1
Grid List 4
File Upload 3
Page Shell 5
Form Layout 2
Filterbar 7
Banner 1
Feature Section 1
Grid List 6
Branded Nav with Compact Header
File Upload 3
Page Shell 5
Form Layout 2
Filterbar 7
Banner 1
Feature Section 1
Grid List 6
Branded Nav with Compact Header
File Upload 3
Page Shell 5
Form Layout 2
Filterbar 7
Banner 1
Feature Section 1
Grid List 6
Branded Nav with Compact Header
File Upload 3
Page Shell 5
Form Layout 2
Filterbar 7
Banner 1
Feature Section 1
Grid List 6
Branded Nav with Compact Header
File Upload 3
Page Shell 5
Form Layout 2
Filterbar 7
Banner 1
Feature Section 1
Grid List 6
Branded Nav with Compact Header

Blocks

Building UI for Angular applications just got easier.

Application

From form layouts and tables to modal dialogs, we provide all the essential components for creating stunning and responsive web applications.

Application Shells

New Page Shells

Page Shells

6 blocks

New Stacked Layouts

Stacked Layouts

9 blocks

New Multi-Column

Multi-Column

6 blocks

Components

New Breadcrumbs

Breadcrumbs

1 blocks , 3 examples

New Drag Elements

Drag Elements

1 blocks

Headings

Page Headings

Page Headings

13 blocks

New Section Headings

Section Headings

10 blocks

Feedbacks

Empty States

Empty States

10 blocks

Forms

Authentication

Authentication

8 blocks

Account & User Management

Account & User Management

10 blocks

Billing & Usage

Billing & Usage

6 blocks

File Upload

File Upload

7 blocks

Form Layouts

Form Layouts

6 blocks

Filterbar

Filterbar

12 blocks

Lists

Feeds

Feeds

5 blocks

Onboarding

Onboarding

8 blocks

New Grid List

Grid List

15 blocks

Elements

Badges

Badges

12 blocks

Overlays

Dialogs

Dialogs

6 blocks

CLI

Go beyond copy-pasting, and build your app with the CLI.

  1. 1
    npx @ngm-dev/cli init
    Initialize a new project
    1. Creates postcssrc.json
    2. Installs tailwindcss and @angular/material
    3. Adds needed styles in angular.json
    4. Configures Material Symbols
  2. 2
    npx @ngm-dev/cli add
    Add a block to the project
    1. Downloads all needed files
    2. Asks to install missing dependencies
    3. Adds the block to the project
    4. Configures relative imports
  3. 3
    npx @ngm-dev/cli update
    Update the blocks in the project
    1. Compares local blocks with the remote ones
    2. Shows the differences
    3. Asks to update the blocks
    
      
Loading...

MCP Server

Model Context Protocol for Angular Material Blocks

Setup

Add the following to your MCP config file, then restart your IDE:

{
  "mcpServers": {
    "ngm-dev-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@ngm-dev/cli",
        "mcp",
        "full/path/to/angular/project"
      ]
    }
  }
}

* Typically full path of current working directory

Enhanced AI Integration

MCP is an open protocol enabling applications like IDEs to better understand project context when interacting with LLMs. This integration allows your AI coding assistant to directly access all Angular Material Blocks.

Works with:

Cursor
Windsurf
Cline

Ask your IDE to:

Add a dialog
Add login with email & password
Add a feature section
Add a form layout

Pricing

Unlock Everything, Forever

Personal
$50.00
SALE 20%
$40.00
For individuals

one-time payment, plus local taxes

Get Access
  • Access to all blocks Full access to all Blocks in Angular.
  • Lifetime access You make payment and enjoy perpetual access to all our premium code contents.
Teams
$180.00
SALE 20%
$144.00
For startups and product teams

one-time payment, plus local taxes

Get Access
  • Access to all blocks Full access to all Blocks in Angular.
  • Lifetime access You make payment and enjoy perpetual access to all our premium code contents.
  • Team members Add up to 25 team members to your account. Each team member will have access to all blocks.

FAQ

Frequently Asked Questions

Have a different question and can't find the answer you're looking for? Reach out to our support team by sending us an email to [email protected] and we'll get back to you as soon as we can.

All Access is a one-time payment that gives you access to all the premium code contents on this platform. This includes all current blocks, and any future additions we make. There are no recurring subscriptions, and you won't be charged for updates.
  1. All current blocks
  2. Any future additions we make
  3. Lifetime access to all our premium code contents
Package Version
Angular 19
@angular/cdk 19
@angular/material 19
tailwindcss 4
Yes, we have a sample project that you can use to test the blocks. You can find it here.
No, design files are not included in the All Access plan. The code contents are only available in the form of source code.
You can use Angular Material Dev UI (or Angular Material Blocks)'s assets or blocks for these types of projects: client projects, your own commercial projects, and open source projects. For more details, please refer to our License page.
Angular Material Dev UI (or Angular Material Blocks) operates as a self-serve product. While we do provide customer support for matters like account management and licensing, it is essential that customers possess the necessary knowledge of CSS, HTML, JavaScript, TypeScript and Angular to utilize the product effectively. Given the unique nature of each project and the intricate interactions between independently authored code components, we do not extend technical support or consulting services directly.
As of now, due to huge discounted price and less number of developed components, we do not provide refunds. All sales are final and no refund will be issued.
Yes, after your purchase, you will receive an email from Paddle.com Market Ltd. containing the receipt. You can also download the receipt from the Customer Portal page.

Can I build/sell templates or themes using Angular Material Dev UI (or Angular Material Blocks) components or blocks?

No, you are not permitted to use Angular Material Dev UI (or Angular Material Blocks) Components or Blocks to create derivative products like themes, UI kits, page builders, or any other form of repackaging and redistributing our components or blocks. For more details, read the License page.

No, you don't need to buy a new license for each project. You can create unlimited applications without extra licenses, as long as your usage adheres to the license terms.
Envelop
Don't miss any update

Stay up to date

Subscribe to the newsletter to stay up to date with components and blocks updates, and much more!

Angular Material Blocks Logo

Angular Material Dev UI (or Angular Material Blocks) is one place stop for developers to explore components and blocks for their Angular Material and Tailwind CSS based applications.

Find us on X (Twitter), LinkedIn, Instagram & Threads