DEV Community: Mateusz Kornas

Moving from Angular Material to mk-kit, view by view

Mateusz Kornas — Fri, 28 Aug 2026 07:23:08 +0000

Angular Material is excellent at what it is: Google's design language, implemented carefully, maintained by the Angular team. If your product should look like Material, stay. This post is for the other case — an admin panel or internal tool where Material was the default, not the decision, and where you keep writing the same things around it: a table with sorting and paging that does not need MatTableDataSource, charts, a kanban board, a chat pane, a proper date-range picker, file upload, a rich-text field.

mk-kit covers that surface in one package, and the migration is incremental: both libraries install side by side, selectors and tokens never collide, and you move view by view.

Why teams switch

Admin surface, not a design language. 180 components including tables with tree rows and CSV export, twelve SVG chart types, kanban, chat, rich-text and block editors, query builder, file upload, signature pad, on-screen keyboard, dynamic forms from JSON.
Theming is CSS variables. No mat.theme() Sass, no palette maps, no .mat-mdc-* overrides. Set --mk-primary, get a consistent light and dark theme across everything, globally or per subtree, at runtime.
Written for Angular 22. Signal inputs everywhere, standalone, OnPush, zoneless, resource()-friendly services, harness-tested. No zone.js assumptions, no ngModule shims.
MIT, no strings. No community edition, no runtime checks, nothing phones home.

The component map

Angular Material	mk-kit	Notes
`MatButton`	`button[mkButton]`	`variant` / `tone` / `size` / `iconOnly` / `loading`
`MatIcon` (ligatures)	`<mk-icon name>`	`provideMkMaterialIcons()` keeps your names — see below
`MatDialog`	`MkDialogService`	`open(Cmp, { data })`, `MK_OVERLAY_DATA`, `await ref.afterClosed`
`MatFormField` + `MatInput` + `MatError`	`mk-form-field` + `input[mkInput]`	label and hint are inputs; the error is derived from the bound control
`MatSelect` / `MatAutocomplete`	`mk-select` / `mk-autocomplete`	`[options]` input instead of `<mat-option>` children
`MatTable` + `MatSort` + `MatPaginator`	`mk-table` + `mkSort` + `mk-pagination`	plain arrays and signals instead of `MatTableDataSource`
`MatSnackBar`	`MkSnackbarService` / `MkToastService`	bottom snackbar with action, or stacked toasts
`MatSlideToggle` / `MatCheckbox` / `MatRadio`	`mk-switch` / `mk-checkbox` / `mk-radio-group`	same CVA bindings
`MatDatepicker` / `MatTimepicker`	`mk-date-picker` / `mk-time-picker`	native `Date`, no adapters; locale via `provideMkI18n`
`MatMenu` / `MatTabs` / `MatStepper` / `MatChips`	`mk-menu` / `mk-tabs` / `mk-stepper` / `mk-chip`, `mk-tag-input`
`MatCard` / `MatDivider` / `MatList` / `MatProgressBar` / `MatSpinner` / `MatTooltip` / `MatBadge`	`mk-card` / `mk-divider` / `mk-list` / `mk-progress-bar` / `mk-spinner` / `[mkTooltip]` / `mk-badge`	`matBadge` attribute → `mk-badge` element
`MatButtonToggle` / `MatBottomSheet` / `MatSidenav`	`mk-button-toggle-group` / `MkBottomSheetService` / `mk-app-shell` + `mk-drawer`
CDK Overlay / DragDrop / Clipboard / A11y / VirtualScroll	`MkOverlayService`, `MkAnchoredPanel` / `@mk-kit/ui/dnd` / `mkCopyToClipboard` / `MkFocusTrap`, `MkLiveAnnouncer` / `mk-virtual-scroll`	keyboard drag built in

Things you get that Material does not ship: charts, kanban, chat, rich text, block editor, query builder, file upload, cropper, gallery and lightbox, event calendar, tree, timeline, command palette, notification centre, guided tour, JSON viewer, diff, log viewer, QR code, dynamic forms.

Icons: keep your Material names

The built-in icon set is 426 SVG glyphs. provideMkMaterialIcons() adds Material Symbols aliases (delete → trash, expand_more → chevron-down, visibility_off → eye-off, …), so ligature names survive a find-and-replace of the tag and the Symbols font download disappears:

<!-- before -->
<mat-icon>qr_code_scanner</mat-icon>
<!-- after -->
<mk-icon name="qr_code_scanner" />

Errors and validation

There is no <mat-error> and no ErrorStateMatcher. mk-form-field reads the projected control's NgControl and renders the first error itself, worded from the validation i18n table — the per-field @if ladder disappears. errorOn="touched" reproduces Material's default timing; errorMessages rewords a single key.

<mk-form-field label="Email" hint="Work address">
  <input mkInput type="email" [formControl]="email" />
</mk-form-field>

Constraint inputs behave like Material's validator directives: [min] / [max] on a date picker report mkMinDate / mkMaxDate, numeric controls report the standard min / max keys, and required on mk-checkbox behaves like Validators.requiredTrue.

Theming

mat.theme() becomes custom properties. Import the stylesheet, set a handful of tokens, done:

:root {
  --mk-primary: #4f46e5;
  --mk-radius: 10px;
  --mk-font-family: "Inter", system-ui, sans-serif;
}

Dark mode is built in via data-mk-theme and MkThemeService; the hand-rolled body.dark token set gets deleted. Density is data-mk-density="compact". The theme builder generates the sheet from your brand colour.

Honest gaps

No MatTableDataSource — you own sort, filter and page with signals (usually less code), or use MkTableDataSource for server-side paging.
Select and autocomplete options are data inputs, not projected <mat-option> templates.
One field look — appearance="outline" attributes just get deleted.
Ripples are opt-in (mkRipple); service APIs are Promise- and signal-based, not Observable-based.
It does not look like Material. That is the point, but say it out loud to your designer first.

Suggested order

Theme tokens.
Icons (alias provider).
Buttons, tooltips, spinners — the low-risk sweep that touches every screen.
Form fields.
Dialogs and bottom sheets.
Tables.
Pickers, chips, snackbars, menus.
Drop @angular/material and prune the .mat-* override CSS.

The condensed map lives on the migration page; the full guide with per-surface before/after snippets is MIGRATION.md in the repository. Coming from PrimeNG instead? That post has a schematic.

Stuck on a specific screen? Open an issue with the template — mapping questions get answered, and real gaps get built.

Switching from PrimeNG? Here's the MIT path.

Mateusz Kornas — Fri, 28 Aug 2026 06:50:11 +0000

PrimeNG has been the default answer to "which Angular component library?" for a decade. On 28 June 2026 that answer got a price tag. If you are one of the teams now doing the maths, this post is the map: what actually changed, what your options are, and — if you pick the MIT route — exactly how far a schematic gets you and where you still have to think.

What changed, in plain terms

PrimeNG 22 and later ship under the PrimeUI licence, not MIT. The same applies to PrimeVue 5+ and PrimeReact 11+. The GitHub repository moved to security-fixes-only the same day.
PrimeNG 21 and everything before it stays MIT. Nobody can take back a licence you already have.
The commercial licence is $599 per developer (perpetual, with a year of updates) until the end of 2026 and $799 from 2027, plus $399 per developer per year to keep receiving updates after that.
A free community licence exists, but only if your company meets all of: under $1M revenue, fewer than 5 developers, fewer than 10 employees, under $3M outside funding. It is renewed yearly and checked at runtime.
The parts most admin apps lean on hardest are sold separately as PrimeUI PRO: Scheduler ($799), Text Editor ($499), Charts ($399), Task Board ($399). A data grid, spreadsheet, gantt and diagram are announced for later in 2026.

None of this is a criticism. Maintaining 90+ components for free for ten years is a gift, and a company is allowed to stop giving it. But it does change your plan.

Your four options

Freeze on PrimeNG 21. It is MIT and it works. It will not follow Angular past the versions it supports, so you are buying time, not a solution. Fine for an app in maintenance mode.
Pay. For a 20-developer team that is $12k now, $16k from January, and ~$8k a year after that to stay current — before any PRO widgets. Entirely reasonable if PrimeNG is deeply woven into a product that makes money.
Move to the community fork. Optimus UI by the OpenNG Foundation keeps the selectors and class names identical, so it is the least disruptive move. It also inherits PrimeNG's open issues and is run by volunteers. Worth a look if you need zero template changes today.
Migrate to a library that was MIT from the start and says so in writing. This is the mk-kit route, and the rest of this post is about it.

What mk-kit is (and is not)

mk-kit is an Angular 22 component library built for admin panels and internal tools: 180 components, MIT, no runtime licence checks, no revenue thresholds, no community edition. Every input is a signal, every component is standalone and OnPush, it runs zoneless, it is WCAG 2.1 AA, and the whole theme is --mk-* CSS custom properties with light and dark out of the box.

It is deliberately narrower than PrimeNG. There is no PDF viewer, no spreadsheet, no diagram editor, no terminal, no dock. There is everything an admin app needs — and the categories PrimeUI sells as PRO are in the free package:

PrimeNG	mk-kit	Note
`p-table`	`mk-table`	`MkTableDataSource`, tree rows, CSV export, print
`p-select` / `p-dropdown`	`mk-select`	`[options]` of `{ label, value }`
`p-multiSelect`	`mk-multi-select`
`p-datePicker` / `p-calendar`	`mk-date-picker`	plus range, time, datetime, month, week pickers
`p-dialog` / `DialogService`	`MkDialogService`	`confirm()` and `prompt()` built in
`p-toast` / `MessageService`	`MkToastService`	`toast.success(detail, { title })`
`p-menu` / `p-contextMenu`	`mk-menu` / `mkContextMenuTriggerFor`	nested submenus
`p-chart` (PRO)	`mk-line-chart`, `mk-bar-chart`, `mk-donut-chart`, …	SVG, themed by tokens, no Chart.js
`p-editor` (PRO)	`mk-rich-text` / `mk-block-editor`
Scheduler (PRO)	`mk-event-calendar`	resource timeline lives in Pro
Task Board (PRO)	`mk-kanban`
`p-cascadeSelect` / `p-listbox` / `p-treeSelect`	`mk-cascader` / `mk-listbox` / `mk-tree-select`
`p-fileUpload`	`mk-file-upload`
`p-blockUI`	`mkBlockUi`
`p-picklist` / `p-orderlist`	`mk-transfer-list` / `mk-sortable-list`

The full component index has all 180; the API reference is generated from the source, and there is an llms.txt if you would rather ask your editor.

The schematic does the boring part

Install mk-kit next to PrimeNG (both can live in one app — the selectors and CSS never collide) and run the migration in report mode first:

ng add @mk-kit/ui
ng g @mk-kit/ui:migrate-primeng --dry-run

You get a primeng-migration.md report before anything is touched. Then apply it:

ng g @mk-kit/ui:migrate-primeng

What it rewrites for you

primeng/* imports and class names → @mk-kit/ui (ButtonModule → MkButton, MessageService → MkToastService, …), deduping the imports: [] arrays.
Selectors that map 1:1, in .html files and inline templates: pButton → mkButton, pInputText → mkInput, p-select → mk-select, p-checkbox, p-toggleswitch, p-table, p-tabView, p-accordion, p-tag, p-chip, p-avatar, p-skeleton, p-drawer, pTooltip → mkTooltip — about 150 rules in total.
Mechanical inputs: [value] → [data] on tables, severity → tone, [(activeIndex)] → [(selectedIndex)], [(visible)] → [(open)] on drawers, tooltipPosition → mkTooltipPlacement.
angular.json styles (PrimeNG theme and primeicons out, the mk-kit stylesheet in) and package.json (the PrimeNG packages are removed once nothing unmapped is left).

What it leaves a note for — a  comment in the template plus a line in the report with a docs link:

p-dialog [(visible)] → MkDialogService.open(Component); p-confirmDialog → await dialog.confirm(…).
The p-toast host and MessageService.add({ severity, summary, detail }) → toast.success(detail, { title }).
Menus, breadcrumbs and steppers driven by [model] → child elements; p-chart → the matching SVG chart; pTemplate → content slots.
Anything with no counterpart — it is listed, not guessed.

The rule is simple: the schematic never rewrites something it cannot make compile. Handle the notes and the build goes green.

Honest gaps

You should know these before you start, not halfway through:

No organisation chart, dock, terminal, meter group or float-label variant. The first is on the roadmap; the others are not planned.
No PDF viewer, spreadsheet or diagram editor — each is a product on its own, and PrimeUI sells them separately too.
Options for selects are data ([options]), not projected option elements. The schematic converts the common { label, value } shape; custom option templates move to the component's option template slot.
Services are Promise- and signal-based, not Observable-based. await dialog.confirm() instead of .subscribe().

If your report lists something that is not in this list, open an issue with the report attached. I read every one, and gaps that block a migration go to the top of the queue.

A sane order of work

Run the dry run. Read the report. Count the notes — that is your real effort.
Swap the theme: delete the PrimeNG theme and primeicons, set --mk-primary and friends (the theme builder writes the file).
Apply the schematic. Fix the notes, one screen at a time, with both libraries installed.
Drop primeng from package.json when the report is empty.

The notes cluster around dialogs, toasts and menus — once you have converted one of each, the rest is repetition.

Timing

The price step to $799 happens on 1 January 2027, and PrimeNG 21 will not follow Angular forever. If you are going to move, the cheapest moment is while PrimeNG 21 still builds cleanly against your Angular version and both libraries can coexist.

And if you are not going to move — genuinely, that is fine. Pay the people who built the thing you use. Just make it a decision rather than a default.

Want a second pair of eyes on your report? Attach it to an issue, or say hello via the Pro waitlist form if you would like the resource scheduler, gantt and the rest of the paid widgets on the same theme.