DEV Community

Closing Angular's aesthetic gap

What "Angular 20, done right" actually means

No NgModule. No @Input() / @Output() decorators. The whole library is built on the modern reactivity primitives:

import { Component } from '@angular/core';
import { AxButtonComponent } from '@axisui-ng/angular';

@Component({
  imports: [AxButtonComponent],
  template: `
    <ax-button variant="primary" size="md" (clickEvent)="save()">
      Save changes
    </ax-button>
  `,
})
export class SettingsComponent {}

Components use input() / output() / model(), run OnPush everywhere, and are zoneless-ready and SSR-safe - they work in Angular Universal and in both zoneless and Zone.js apps. Standalone means you import the component, not a module barrel.

Accessibility is a test, not a promise

Most libraries say "accessible." AxisUI runs jest-axe against every component in CI, in three axes: LTR and RTL, and light and dark. A component that regresses an ARIA contract or a contrast ratio fails the build. There are 150 test suites behind the library doing this and more. That's the part I most want scrutinized - if you find an a11y gap, that's a bug report I want.

Install only what you ship

AxisUI is published as per-category packages behind one umbrella. Want everything, wired up with Tailwind and tokens in one step?

ng add @axisui-ng/angular

Want just a button and forms in an existing app?

npm i @axisui-ng/buttons @axisui-ng/forms

A consumer who only imports a button ships a button. The category split (buttons, forms, data, overlays, navigation, charts, feedback, layout, and more) keeps that honest.

Theming: Tailwind v4 + OKLCH

Theming lives in a Tailwind v4 @theme block as OKLCH tokens - a light/dark cascade, density presets, and industry palettes. Because it's OKLCH, lightness is perceptually even across hues, so a generated palette doesn't have the muddy mid-tones you get shifting HSL. The charts are dependency-free SVG themed from the same --color-chart-* tokens - no charting library in your bundle.

It composes into real products

The thing I'm proudest of isn't any single component - it's that they compose. The demo ships eight full application templates built entirely from AxisUI: analytics, banking, CRM, healthcare, logistics, automotive, and government dashboards, plus a data-grid workbench, auth and landing pages, a โŒ˜K command palette, and a live theme configurator. Click through them: https://axisui-demo.pages.dev

Where it's at, honestly

It's new, and it's mostly one person's work. The API surface is stable enough that I've built those eight templates on it without fighting it, but it hasn't been battle-tested across hundreds of teams yet. That's exactly why I'm posting: I want Angular developers to try it, break it, and tell me where it falls short. If it saves you from the Material-or-hand-roll trade even once, it did its job.

What would make you switch a real project to it? I'm reading every reply.

Comments

No comments yet. Start the discussion.