Needless UI

Open Source · Angular 22 · MIT

UI-Komponenten, unnötig gut durchdacht.

Needless UI gestaltet native Elemente mit einem einzigen frameworkunabhängigen Stylesheet und W3C-Design-Tokens. Die Angular-Direktiven ergänzen das Verhalten aus Angular Aria, sodass jede Komponente vom ersten Rendern an barrierefrei ist.

Loslegen Komponenten ansehen

Warum es Needless UI gibt

  • Native Elemente zuerst

    <button nuiButton> ist ein echter Button. Formulare, Tastatur und Screenreader funktionieren, weil nichts ihn umhüllt.

  • Ein Stylesheet für jedes Framework

    Die Komponenten sind reines CSS in Cascade Layers: heute Angular, als Nächstes React und schlichtes HTML sowieso.

  • Dein CSS gewinnt immer

    Alles steckt in @layer nui, deshalb überschreiben deine eigenen Styles es ohne !important und ohne Kampf um Spezifität.

  • Barrierefrei von Grund auf

    Beim Generieren der Palette wird jedes Farbpaar gegen WCAG 2.2 AA geprüft. Fokus, Forced Colors und reduzierte Bewegung sind bereits berücksichtigt.

  • Unnötig anpassbar

    Federn, Druckeffekte, Eingangsanimationen, Eckenformen, Radius und Dichte: ein Attribut für die ganze App oder ein Input pro Komponente, auf Basis standardisierter W3C-Design-Tokens.

  • Modernes Angular

    Signal Inputs, zoneless, serverseitiges Rendering und ein Entry Point pro Komponente – so liefern Apps nur aus, was sie importieren.

Zwei Imports, fertig

Füge das Paket hinzu, importiere das Stylesheet einmal und verwende die Komponenten in jeder Standalone-Komponente.

install.sh
pnpm add @needless-ui/angular @angular/aria @angular/cdk
usage.ts
import { Component } from '@angular/core';
import { NuiButton } from '@needless-ui/angular/button';

@Component({
  selector: 'app-root',
  imports: [NuiButton],
  template: `<button nuiButton (click)="save()">Save changes</button>`,
})
export class App {
  save() {}
}