@mk-kit/ui

Themable, accessible Angular component library for admin dashboards, back-offices and internal tools.

185+ components (225+ selectors with directives and pipes) and 16 services — data tables, charts, date & time pickers, editors, kanban, overlays, an app shell — written for Angular 22 with signals and OnPush from day one. Every visual value is a --mk-* CSS custom property; light and dark ship out of the box; WCAG 2.1 AA is the target, not the marketing. MIT licensed. No third-party runtime dependencies — only Angular and the sibling packages @mk-kit/core (the framework-free engines: diff, markdown, anchored positioning, query, dates) and @mk-kit/validators (the identifier checks) — both zero-dependency and tree-shakeable.

• Docs & live demos: https://mk-kit.dev
• API reference: https://mk-kit.dev/api — also as api.json, llms.txt and llms-full.txt for tools and AI assistants
• Testing: @mk-kit/ui/testing — component harnesses for TestBed specs (https://mk-kit.dev/testing)
• MCP server: npx -y @mk-kit/mcp — exact component/input/output lookup for Claude Code, Cursor & co. (@mk-kit/mcp)
• Changelog: CHANGELOG.md
• Issues: https://github.com/mk-kit/mk-kit/issues

Install

ng add @mk-kit/ui

ng add installs the package and wires the theme stylesheet into angular.json.

Coming from PrimeNG? ng g @mk-kit/ui:migrate-primeng --dry-run shows what the codemod would rewrite (imports, class names, 1:1 selectors, a few input names) and what needs a manual touch; without --dry-run it applies the changes and writes primeng-migration.md. Details: https://mk-kit.dev/migration.

Scaffolding an admin screen? ng g @mk-kit/ui:crud product --fields "name!:string,price:currency,status:select=draft|published" generates a working slice — typed model, data service (in-memory, or --api /api/products for HttpClient), mk-table list page with search/sort/pagination/delete, mk-dynamic-form create/edit page, lazy routes wired into the app, and a harness-driven spec. Details: https://mk-kit.dev/crud. By hand instead:

npm install @mk-kit/ui

Peer dependencies: @angular/core, @angular/common, @angular/forms, @angular/platform-browser (^22) and rxjs (^7.8).

Setup

1. Import the theme stylesheet once (in angular.json styles or your global stylesheet):

@import '@mk-kit/ui/styles.css';

2. Add the mk-app class to <body> (or a top-level wrapper) so background, text colour, fonts and themed scrollbars apply:

<body class="mk-app">

3. Use components — everything is standalone; import what you need:

import { Component, inject } from '@angular/core';
import { MkButton, MkCard, MkThemeService } from '@mk-kit/ui';

@Component({
  selector: 'app-root',
  imports: [MkButton, MkCard],
  template: `
    <mk-card variant="elevated">
      <button mkButton tone="primary" (click)="theme.toggle()">
        Toggle theme
      </button>
    </mk-card>
  `,
})
export class AppRoot {
  protected readonly theme = inject(MkThemeService);
}

What's inside

| Group | Highlights | |---|---| | Forms & inputs (54) | text, number, password (strength meter), OTP, phone (country prefix), postal code, currency, card number, IBAN, tax id, masked input, tag input, select, autocomplete, multi-select, tree-select, transfer list, checkbox, radio, switch, slider, range slider, rating, colour picker, file upload (dropzone), signature pad, numeric keypad & on-screen keyboard, repeater (FormArray), form field with automatic validation messages, form error summary, listbox, cascader (multi-column select), floating labels, dynamic form (JSON schema → form); every control binds with reactive forms, ngModel and Angular 22 Signal Forms ([formField]), with mk-form-field / the error summary reading the field state and mkDynamicFormToSignalSchema converting a dynamic-form definition to a schema() | | Date & time | calendar, date picker, date-range picker, time picker, month/year picker, week picker, inline mini date, event calendar with editable week/day grid (drag to move / resize) | | Tables & grids (7) | data table — sort, multi-select, expandable rows, tree rows, grouping, sticky header, column resize / reorder / pin, inline cell edit, responsive stacking, CSV export, print styles — plus MkTableDataSource for server-side sort/page/filter, query builder (mk-query-builder → predicate / readable text / MkTableDataSource.setQuery()) | | Charts (12) | line/area, bar (stacked, horizontal, label fitting), donut, gauge, progress ring, scatter/bubble, radar, funnel, treemap, heatmap, calendar heatmap, sparkline — SVG, themed, accessible | | Data display (27) | cards, lists, stat cards, badges, badge overlay ([mkBadgeOverlay]), tags, chips, avatars & groups, timeline, description list, tree, org chart, empty state, countdown, QR code, diff view, JSON viewer, code block, virtual scroll, carousel, kanban | | Navigation & layout (21) | app shell (responsive sidebar), stack / flex / grid layout primitives, nav list & groups, tabs, stepper, breadcrumb, pagination, menu, context menu, command palette (⌘K), page header, toolbar, splitter, drawer, scroll area, FAB, back-to-top | | Feedback & overlays (21) | dialogs (+ confirm() / alert() / prompt()), bottom sheet, drawer, popover, popconfirm, hovercard, tooltip, toast, snackbar, alert, banner, result page, notification center, product tour, progress bar, loading bar, spinner, skeletons, block UI (region / page overlay), draggable & resizable dialogs | | Editors & interactions (31) | block editor (Notion-style, HTML round-trip), rich text, markdown renderer, code editor, log viewer, drag & drop, sortable list, @mentions, hotkeys, undo/redo history, permissions (*mkCan), clipboard, intersect, infinite scroll, ripple, scrollspy, chat (streaming message log, tool cards, prompt box), Intl formatting pipes (currency, relative time, file size, initials, truncate, pluralize) | | Media (6) | image with states, gallery, lightbox, cropper, media manager | | Core services | theme (light/dark/system + density + high contrast), breakpoints, overlay & anchored panels, focus trap, live announcer, icon registry (121 default icons always on + 305 opt-in Lucide-derived, tree-shakeable by themed subset or lazy-loaded via provideMkIcons()), i18n |

The full, searchable index lives in the docs (/components-index).

Entry points

Import from the umbrella @mk-kit/ui, or from a group to keep bundles lean:

import { MkTable } from '@mk-kit/ui/table';
import { MkLineChart } from '@mk-kit/ui/data';
import { MkDatePicker } from '@mk-kit/ui/datetime';

Available: core, forms, datetime, table, data, navigation, feedback, directives, dnd, media, icon, icon/extended (the opt-in 305-icon set), button, checkbox, chip, context-menu, layout, chat, query-builder, dynamic-form, rich-text, block-editor, plus testing (component harnesses for specs), locales/pl · locales/de · locales/uk · locales/es · locales/fr (complete string packs) and embed (ship components as shadow-DOM custom elements, https://mk-kit.dev/embed) — harnesses, locales and embed are never re-exported from the umbrella. sideEffects: false throughout.

Theming

The entire look is driven by --mk-* custom properties on :root. Override any of them — globally, or scoped to a subtree — to re-brand at runtime, no rebuild:

:root {
  --mk-primary: #0f766e;
  --mk-primary-contrast: #ffffff;
  --mk-radius-md: 4px;
  --mk-font-sans: 'Inter', system-ui, sans-serif;
}

[data-mk-theme='dark'] {
  --mk-primary: #2dd4bf;
  --mk-primary-contrast: #042f2e;
}

The docs include a theme builder that exports a ready-to-paste :root block.

Dark mode

Dark mode follows the OS prefers-color-scheme with no JavaScript. To let users choose, set data-mk-theme on <html> ("light" | "dark") or use MkThemeService:

const theme = inject(MkThemeService);
theme.setTheme('dark');      // force dark
theme.setTheme('system');    // follow the OS
theme.toggle();              // flip light/dark
theme.resolvedTheme();       // signal: 'light' | 'dark'

The choice is persisted to localStorage; the service is SSR-safe.

Presets

A preset re-declares the whole token set — type, radii, shadows, every colour in light and dark — behind one attribute, so a second look is one import and one attribute, on <html> or on any subtree:

@import '@mk-kit/ui/styles.css';
@import '@mk-kit/ui/presets/momentum.css';

<html data-mk-preset="momentum">

momentum is the first: Manrope set heavy and tight, soft violet-grey surfaces, generous radii, feather-light shadows, an indigo accent meant to be swapped at runtime. Presets hold the same text/surface pairs to WCAG AA as the base theme and step aside for data-mk-contrast="high". Live demo and the accent-swap recipe at https://mk-kit.dev/theming#presets.

Density & touch

Three densities — comfortable, compact, touch — via data-mk-density or MkThemeService.setDensity(). Touch density enlarges every hit target; inputs use 16px text on coarse pointers, drag starts on long-press, overlays respect safe-area insets.

Internationalisation

Every string the library renders comes from one provider:

import { provideMkI18n } from '@mk-kit/ui/core';

bootstrapApplication(AppRoot, {
  providers: [provideMkI18n({ close: 'Zamknij', noData: 'Brak danych' })],
});

Complete translations are their own entry points, so an app carries only the locales it provides — Polish (pl), German (de), Ukrainian (uk), Spanish (es) and French (fr):

import { provideMkI18nPl } from '@mk-kit/ui/locales/pl';
// …or provideMkI18nDe / provideMkI18nUk / provideMkI18nEs / provideMkI18nFr

providers: [provideMkI18nPl({ noData: 'Nic tu nie ma' })]; // overrides merge over the pack

Each pack ships with a conformance spec (full key coverage, shapes, CLDR plural rules) — a new language is one file plus that spec; contributions welcome.

Overrides can be scoped to a component subtree for mixed-locale screens. Layout and arrow keys flip under dir="rtl".

Accessibility

Target: WCAG 2.1 AA. Semantic roles and complete aria-* wiring, roving tabindex for composite widgets, focus trapping and background inert for modals, an Escape that closes only the topmost overlay, live-region announcements for async state, contrast-checked tokens in both themes, prefers-reduced-motion and forced-colors support. Axe runs over rendered fixtures in the test suite; information is never conveyed by colour alone. The accessibility statement lists what is verified automatically and the known gaps.

SSR & zoneless

Every component guards non-browser platforms (an SSR smoke suite renders the whole library on the server), and nothing depends on Zone.js.

Coming from PrimeNG?

The admin surface maps closely — p-table → mk-table, p-select → mk-select, p-datePicker → mk-date-picker, DialogService → MkDialogService, MessageService → MkToastService — and the parts PrimeUI sells separately (charts, text editor, scheduler, task board) are here under MIT. The docs landing page carries a mapping table.

Versioning & support

mk-kit tracks the current Angular major. A matching release follows each new Angular major within weeks; the previous major keeps receiving fixes for six months. Releases are published from CI with npm provenance (npm audit signatures).

Contributing

See CONTRIBUTING.md (DCO sign-off), SECURITY.md for vulnerability reports, and TRADEMARK.md for use of the name and logo.

License

MIT © Mateusz Kornaś. Part of the built-in icon set is derived from Lucide (ISC) — see THIRD_PARTY_NOTICES.md.