Feedbacks

Built forAngular MaterialTailwind CSS

Rapid Angular UI Development

With Pre-built Blocks, Beautiful Templates & Powerful CLI

Browse Blocks Explore Templates Install CLI

Choose your way to access 500+ blocks

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.

Features

Stop reinventing the wheel. Angular Material Blocks empowers you to build beautiful, functional Angular applications faster than ever before.

Choose from a wide range of pre-built UI blocks, including forms, banners, hero sections, and more.

Blocks

Building UI for Angular applications just got easier.

We designed the blocks you always wanted for building dashboards, applications, and more. From forms to billing pages, bring your next project to life swiftly.

Application

Marketing

Page Shells

6 blocks

Stacked Layouts

9 blocks

Multi-Column

6 blocks

Breadcrumbs

1 blocks , 3 examples

Drag Elements

1 blocks

Bar List

1 blocks

Category Bar

1 blocks , 1 examples

Progress Circle

1 blocks

Tracker

1 blocks , 1 examples

Page Headings

13 blocks

Section Headings

10 blocks

Empty States

10 blocks

Templates

Beautiful website templates built with Angular Material

Website templates crafted with Angular, Angular Material and Tailwind CSS. Ideal for launching your next project with a modern tech stack.

Dashboard Template

A comprehensive dashboard template featuring analytics, charts, tables, and responsive design. Built with the latest Angular Material components and best practices.

SaaS Marketing Website

Launch your next SaaS, Dev Tool, or related project with a beautiful website template.

Insights Template

A template for feeding and tracking data with clarity. Built with Angular and features intuitive UI elements along with dynamic filtering options, such as URL query parameters.

Overview Template

A template for displaying an overview of data with charts and tables.

CLI

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

Install, add, and update blocks effortlessly with our powerful command-line interface. Streamline your workflow and boost productivity.

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
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
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

Our MCP server provides superior AI-assisted development. Enhance your IDE with direct access to all Angular Material Blocks for smarter code generation.

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

500+ blocks4 templates

When you buy the access, you gain access to everything included on this platform. This includes all 500+ blocks and 4 templates, and any future additions we make. There are no recurring subscriptions, and you won't be charged for updates.

Personal

$99.00

For individuals

one-time payment, plus local taxes

Get Access

Lifetime access — You make payment and enjoy perpetual access to all our premium code contents.

Teams

$499

For startups and product teams

one-time payment, plus local taxes

Get Access

Team members — Add up to 10 team members to your account. Each team member will have access to all blocks & templates.

Enterprise

Custom

For large organizations

one-time payment, plus local taxes

Custom pricing — Need more than 10 team members? Contact us for custom pricing.

Trusted by

Ready to build your next app? Convince your manager with a ready-made, customizable email & letter.

CONVINCE YOUR MANAGER

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.

What is All Access?

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.

What is included in All Access?

All current blocks
Any future additions we make
Lifetime access to all our premium code contents

What versions are used?

Package	Version
Angular	19
@angular/cdk	19
@angular/material	19
tailwindcss	4

Can I try before buying?

Yes, you should try before buying. page-shell-1, nav-with-page-header, full-width-three-column, breadcrumbs, drag-elements, page-heading-1, login-email-password, simple-with-icons, onboarding-feed-1, grid-list-1, stacked-list-simple, simple-table, badge-1, dialog-1, area-chart-1, bar-chart-1, donut-chart-1, line-chart-1, simple-flyout-menu, header-1, landing-page-1, pricing-page-1, about-page-1, not-found-page-1, memory-album, words-album, pricing-section-1, content-section-1, faq-section-1, logo-cloud-1, footer-1, blog-section-1, contact-section-1, stats-section-1, stats-section-2, stats-section-3, team-section-1 are free and you can try them before buying.

Do you have any sample projects?

Yes, we have a sample project that you can use to test the blocks. You can find it here.

Are design files included?

No, design files are not included in the All Access plan. The code contents are only available in the form of source code.

In which types of projects I can use blocks?

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.

Do you offer technical support?

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.

What is your refund policy?

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.

Do I get a receipt?

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 content from this platform?

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.

Do I need to purchase a license for each project?

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.

How do the "teams" license work? What is a "seat" in this context?

Teams are a way to manage multiple users and their access to the platform. Each team can have a primary user and multiple members. The primary user can add to the team. The primary user can also manage the team settings. Each team can have a maximum of 10 members. Licenses are non-transferrable, i.e. a license cannot be reassigned from one person to another.

Features

Blocks

Templates

Dashboard Template

SaaS Marketing Website

Insights Template

Overview Template

CLI

MCP Server

Works with:

Ask your IDE to:

Pricing

Trusted by

Ready to build your next app? Convince your manager with a ready-made, customizable email & letter.

FAQ

Stay up to date