@guildofgleks/ui — an Angular 21 component library with no CDK and no Material
Hi dear reader! (/ ^_^)/
First of all I want to say that this lib I made for personal use, but my friend said that I must share it, that's why I made a documentation site for it and publish this post.
--==--==--==--==--
This is a component library for Angular 21. Current version is 21.4.4, Apache-2.0, on npm. I work on it continuously — 11 releases since the first one on 2026-07-30.
Inside package:
- 27 components, 5 standalone directives, 15 slot directives, 3 services (DialogService, ToastService, ThemeService).
- 905 unit tests across 48 spec files (Vitest, via the Angular unit-test builder).
- 41 built-in icons (Lucide glyphs, inlined) plus a registry for your own.
- 1241 --gog-* CSS custom properties, generated into a TOKENS.md that ships in the package.
What is deliberately not in it:
- No Angular CDK, Material, "@angular/router" or animations package. Peers are "@angular/core", "@angular/common", "@angular/forms", "@angular/platform-browser". The only runtime dependency is tslib.
- No NgModules, no decorators. Everything is standalone, OnPush, and built on input() / output() / model().
- No Sass config and no JS theme object. Theming is CSS custom properties only, in three layers (primitive, semantic, component). Restyling one component or one instance is a CSS override, not a build step.
Design decisions you may or may not agree with:
- Reactive Forms only. Every form control is a ControlValueAccessor built and tested against [formControl] / formControlName. The library never imports FormsModule; [(ngModel)] is untested and I do not claim it works.
- Your data shapes, not mine. Dropdowns take your objects with accessor paths (optionLabel="profile.fullName"), not a mandated { id, name } DTO.
- gog-button cannot be a link. It renders its own <button>. For links you put [gogButton] on your own <a>, so routerLink / href / target keep working and the package needs no router dependency.
- Outputs are prefixed (gogClick, gogToggle) so they never collide with native DOM events. Inputs keep their natural names.
- Version tracks the Angular major, not semver maturity. 21.x means "for Angular 21". The project is pre-1.0, so breaking changes can land in a minor — 21.5.0 is explicitly the breaking one.
Also:
- The package ships an `AGENTS.md` — a per-component API reference with every input, output, slot, type and default. It is there because an AI assistant writing code against an unfamiliar library guesses, and a stale API table becomes wrong code in your app with nothing failing the build. Point your assistant at it.
Docs: https://ui.guildofgleks.com/
Source: https://github.com/GuildOfGleks/gleks_web_ui
NPM: https://www.npmjs.com/package/@guildofgleks/ui?activeTab=readme
Feedback on the API is more useful to me than stars. If something in the list above reads as a mistake, say so — 21.5.0 is the release where changing it is cheap.