UI Kit is a modern, modular UI component library for Angular — built from scratch. 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. The goal is to provide both a reusable component set and an educational reference for building high-quality Angular libraries.

Want to contribute? Jump into issues and PRs — everyone's welcome.

Browse the live documentation at ui.ng.guide. Every component ships with interactive live examples and their source code, served from a custom Angular documentation site (no Storybook involved).

• ♻️ Reusable Angular components — standalone, signal-based, zoneless-ready
• 🧱 Material Design-inspired, not dependent on Angular Material
• 📦 ng-packagr & APF-compatible publishable package (@ngguide/ui)
• 🎨 Customizable themes & tokens powered by an M3 theming layer
• 🧪 Tested with Vitest (Angular's first-party Vitest builder)
• 🧩 Per-component entry points — import only what you use

29 components ship today, each as its own secondary entry point under @ngguide/ui/*. All of the components below are available now:

Under the hood, components are built on a set of low-level building blocks that ship as their own entry points but are not user-facing components on their own:

• @ngguide/ui/theme — provideM3Theme, M3ThemeService, generateScheme (M3 design-token/theming infrastructure)
• @ngguide/ui/interaction — [guiStateLayer], [guiRipple], [guiFocusRing] and a11y key managers
• @ngguide/ui/overlay — picker/modal/breakpoint overlay infrastructure
• @ngguide/ui/forms — [guiFormControl] ControlValueAccessor bridge for forms integration
• @ngguide/ui/datetime — date models, parsing, and Intl helpers used by the date/time pickers
• @ngguide/ui (base) — shared primitives and types (e.g. the GuiSize union)

These are genuine Material 3 components not yet built. They have no entry point today and are tracked for future work:

• App bars
• Toolbars
• Navigation bar
• Navigation rail
• Navigation drawer
• Tabs
• Search

• Angular 21 (standalone components, ChangeDetectionStrategy.OnPush)
• Signals-based state and inputs
• Zoneless change detection (no zone.js)
• Nx 22 monorepo, pnpm package manager
• ng-packagr (APF-compatible) for the publishable library, via the @nx/angular:package executor
• Vitest (Angular's first-party Vitest builder, jsdom, zoneless) for testing
• Custom Angular docs site hosted at ui.ng.guide for live examples + code
• Hand-authored CSS driven by M3 design tokens (no CSS framework / utility classes for component styling)

UI Kit is community-first. To contribute:

1. Clone the repo
2. Run pnpm install
3. Use the Nx targets via pnpm exec:

   pnpm exec nx serve web                         # run the demo / docs playground
   pnpm exec nx test ui                           # test the library
   pnpm exec nx build ui                          # build the publishable @ngguide/ui package
   pnpm exec nx run-many -t lint test build       # everything, both projects

4. Check open issues or suggest improvements

Every component is developed with public feedback — PRs, suggestions, and code reviews are encouraged.

To scaffold a new component (each is a secondary entry point of the single ui library):

pnpm exec nx g @nx/angular:library-secondary-entry-point --library=ui --name=<component-name> --skipModule

MIT — use freely, contribute openly.