17. Angular CDK for Headless Admin Primitives
Status
Accepted — 2026-04-24
Context
The LinkedIn admin queue needs drag-and-drop reordering. The project has no UI component library installed — ADR 0007 reserves PrimeNG for a future /tools/* surface that does not yet exist. Building a custom drag-and-drop implementation from scratch would be fragile and time-consuming for a single admin page. Angular CDK (@angular/cdk) provides headless, unstyled behavior primitives (drag-drop, a11y, overlays) with zero visual opinions, unlike PrimeNG which ships opinionated styles and themed components.
Decision
@angular/cdk is permitted as a dependency, constrained to lazy-loaded admin routes.
- CDK modules are imported only in standalone admin components. No CDK in the blog module or any public-facing route.
- All styling uses the existing
--jjk-*design token system. CDK provides CSS class hooks (cdk-drag-preview,cdk-drag-placeholder, etc.) with no default styles — the project supplies all visual treatment. - CDK is complementary to ADR 0007’s PrimeNG policy, not a replacement. PrimeNG is for rich, themed widgets in
/tools/*; CDK is for behavioral primitives in admin. - The first use case is
@angular/cdk/drag-dropfor the LinkedIn dispatch queue. Future admin features (virtual scroll, a11y overlays) may use other CDK modules under the same constraint.
Consequences
- Blog bundle is unaffected. CDK loads only within lazy-loaded admin routes, so public visitors never download it.
- CDK DragDrop is approximately 15 KB gzipped — acceptable for admin-only routes with authenticated users.
- Full visual control is retained. CDK’s headless nature means the satirical design language is never compromised by library defaults.
- The project now has two UI library policies: CDK (headless, admin-only) and PrimeNG (themed, tools-only, not yet installed). Both are scoped to lazy-loaded boundaries.
- No automated enforcement prevents CDK imports in blog routes. The constraint is held by reviewer discipline, consistent with ADR 0007.