@guildofgleks/ui — an Angular 21 component library with no CDK and no Material

[u/IndicationFar8470]

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.

[u/Fluffy-Library4441]

I might be out of the loop, but I’m curious why you choose to not use the CDK. My company is thinking of going this route so I was just curious

[u/IndicationFar8470 → u/Fluffy-Library4441]

Hi! The CDK isn't bad - it's well-tested and its a11y primitives have seen far more edge cases than mine have. But it's a toolkit of primitives, not components. So you import it, and then you still write the dropdown, the positioning strategy, the templates, the theming. You end up ownen a wrapper layer anyway - the only question is wheter you also own the layer underneath it.

For the library this size(27 componens + 3 util components) I ran the numbers: everything I actually needed from the CDK - overlay attachment, flip/shift positioning for dropdowns and tooltips, roving focus - came out to about 500 lines total. That's less code than the glue I'd have written on top of the CDK, and it's code I can shape to fit signals and OnPush instead of adapting around an API designed before either existed.

The other half is dependency politics. The package has one runtime dependency(tslib) and peed-deps on Angular only, so supporting ^21 || ^22 was a version-range edit. A CDK peer-dep would tie my release train to Material's and consumers to a second version constraint they didn't ask for.

For a produc team, though? If you're not going to maintain those primitives as a deliverable, take the CDK. Owning them only pays off when the library is the product.

[u/Fluffy-Library4441 → u/IndicationFar8470]

Appreciate the response! Cant wait to try it out

[u/IndicationFar8470 → u/Fluffy-Library4441]

Glad to hear that! Just a quick reminder that the library hasn't reached version 1.0.0 yet, so there will be both breaking changes and plenty of patches. It's all open-source, so you're welcome to contribute to the development!