Angular UI Kit by ng.guide
UI Kit is a modern, modular UI component library for Angular — built from scratch, guided by the course ng.guide.
This is not a wrapper around Angular Material — it’s a fresh implementation of Material Design principles with full transparency, customizability, and learning in mind.
UI Kit is being built in public, component by component, as part of the Angular UI Kit course. The goal is to provide both a reusable component set and an educational reference for building high-quality Angular libraries.
Want to learn and contribute?
Join the course or jump into issues and PRs — everyone’s welcome.
- ♻️ Reusable Angular components
- ⚙️ Built with Angular CLI & Nx
- 📦 ng-packagr & APF-compatible
- 🧱 Material Design-inspired, not dependent on Angular Material
- 🎨 Customizable themes & tokens
- 🧪 Tested with Vitest
Statuses:
- ✅ done
- 🛠 in progress
- ⏳ planned
- ❌ cancelled
- 🔧 needs revision
| Component | Status |
|---|---|
| App bars | ⏳ |
| Badges | ⏳ |
| Buttons | 🔧 |
| Button groups | ⏳ |
| Extended FAB | ⏳ |
| FAB | 🔧 |
| FAB menu | ⏳ |
| Icon buttons | ⏳ |
| Segmented buttons | ⏳ |
| Split button | ⏳ |
| Cards | ⏳ |
| Carousel | ⏳ |
| Checkbox | ⏳ |
| Chips | ⏳ |
| Date pickers | ⏳ |
| Time pickers | ⏳ |
| Dialogs | ⏳ |
| Divider | ⏳ |
| Lists | ⏳ |
| Loading indicator | ⏳ |
| Progress indicators | ⏳ |
| Menus | ⏳ |
| Navigation bar | ⏳ |
| Navigation drawer | ⏳ |
| Navigation rail | ⏳ |
| Radio button | ⏳ |
| Search | ⏳ |
| Bottom sheets | ⏳ |
| Side sheets | ⏳ |
| Sliders | ⏳ |
| Snackbar | ⏳ |
| Switch | ⏳ |
| Tabs | ⏳ |
| Text fields | ⏳ |
| Toolbars | ⏳ |
| Tooltips | ⏳ |
| Module | Focus | Status |
|---|---|---|
| 1 | Intro to UI Kits and Design Systems | ✅ Done |
| 2 | Project Setup and Structure | ✅ Done |
| 3 | Component Architecture | 🚧 Ongoing |
| 4 | Styling & Style Isolation | ⏳ Planned |
| 5 | Icon System | ⏳ Planned |
| 6 | Theming with Design Tokens | ⏳ Planned |
| 7 | Accessibility (a11y) | ⏳ Planned |
| 8 | Testing | ⏳ Planned |
| 9 | Documentation | ⏳ Planned |
| 10 | Build & Publish | ⏳ Planned |
| 11–12 | Tooling: Schematics & ng add/update | ⏳ Bonus |
- Angular 20
- Standalone components
- Signals-based state
- Tailwind CSS
- Angular CDK
- Nx workspace
- Storybook/Ng Docs
- Vitest
UI Kit is community-first. If you're following the course or just want to contribute:
- Clone the repo
- Run
npm install - Use
nx serve [project]/nx test [project]/nx build [project]etc. - Check open issues or suggest improvements
Every component is developed with public feedback — PRs, suggestions, and code reviews are encouraged.
To create a new component, run nx g @nx/angular:library-secondary-entry-point --library=ui --name=<component-name> --skipModule.
This library is the backbone of the course Angular UI Kit on ng.guide — where you learn to build your own UI system, not just use one.
MIT — use freely, contribute openly.