---
title: "Angular UI Kit"
description: "Build a production-grade Material 3 component library for Angular from scratch, straight from the M3 spec. Standalone, signal-based, zoneless, one component at a time."
canonical: "https://ng.guide/angular-ui-kit"
---

# Angular UI Kit

> Build a production-grade Material 3 component library for Angular from scratch, straight from the M3 spec. Standalone, signal-based, zoneless, one component at a time.

This is the markdown form of [https://ng.guide/angular-ui-kit](https://ng.guide/angular-ui-kit).

## What it costs

- **$249** USD, one-time, tax-exclusive — Stripe is the merchant of record and adds tax at payment time.
- A personal licence, not a subscription. Nothing recurs and access does not expire.
- Free to start: Connect the course to your agent and walk the first 3 lessons free — no card, no checkout. Real lessons on the same server the paid course runs on, with your progress kept.
- Offer: $99 with the public code LAUNCH99, $150 off, until 30 September 2026.
- Terms in full: [https://ng.guide/pricing.md](https://ng.guide/pricing.md)

## Who it is for

Advanced. It assumes TypeScript and solid Angular, and it teaches library *authoring* — the public API, theming, the package format, publishing — rather than the framework. Someone learning Angular itself should not start here.

## Curriculum

60 lessons across 15 modules.

1. **Standing Up the Workspace** — 8 lessons
   - Free: Your Repo, Your Library; One Publishable Library; Making It Match the Spec
2. **M3 Tokens** — 4 lessons
3. **Interaction Foundation** — 4 lessons
4. **Overlay Foundation** — 4 lessons
5. **Forms CVA Bridge** — 3 lessons
6. **Dynamic Color (optional)** — 4 lessons
7. **First Components: Icon & Button** — 5 lessons
8. **Actions** — 4 lessons
9. **Selection** — 4 lessons
10. **Communication** — 4 lessons
11. **Containment** — 4 lessons
12. **Datetime Foundation** — 3 lessons
13. **Text Inputs** — 5 lessons
14. **Build & Publish** — 2 lessons
15. **Showcase Capstone** — 2 lessons

## How it runs

The course is a remote MCP server. Your own agent connects to it and does the teaching; every command runs on your machine at your own model rates, and inference is never billed through ngguide.

```
mkdir angular-ui-kit && cd angular-ui-kit
npx add-mcp https://ng.guide/mcp/angular-ui-kit --name angular-ui-kit
```

Then, in that folder, ask the agent:

```
Set up the ngguide course in this folder — the angular-ui-kit MCP server has the setup instructions.
```

The install guide is at [https://ng.guide/docs.md](https://ng.guide/docs.md) and the server's tools are listed at [https://ng.guide/mcp](https://ng.guide/mcp).