Closing Angular's aesthetic gap

kishan hadiyal — Sun, 26 Jul 2026 04:46:24 +0000

Closing Angular's aesthetic gap: building AxisUI, a signals-first component library

If you've built an Angular product in the last two years, you've felt this. The libraries that redefined what "modern component design" looks like — shadcn/ui, Radix, Park UI — showed up for React and mostly stayed there. Angular got thin ports, abandoned ports, or nothing.

So Angular teams keep making the same trade: adopt Angular Material and accept its Material-Design aesthetic everywhere, or wire up Tailwind plus a headless-primitive library by hand and absorb the cost of keeping fifty components visually consistent yourselves.

I got tired of that trade, so I built the third option.

AxisUI is a UI component library for Angular 20: 100+ components, signals-first, standalone by default, styled with Tailwind v4 and OKLCH tokens, accessible to WCAG 2.2 AA — with the accessibility checks running in CI, not just claimed in a README. Every component is MIT.

Live demo: https://axisui-demo.pages.dev
Docs: https://axisui.dev
Storybook: https://axisui-storybook.pages.dev
npm: @axisui-ng/angular

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.

Try the demo → https://axisui-demo.pages.dev
Star / file issues → https://github.com/Kishan009/axisui-ng
ng add @axisui-ng/angular

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

DEV Community: kishan hadiyal

Closing Angular's aesthetic gap