Erste Schritte

Needless UI funktioniert mit Angular 22. Die Komponenten sind Standalone-Direktiven, du musst also keine Module importieren.

Installation

Füge das Angular-Paket zusammen mit Angular Aria und dem CDK hinzu, die Tastaturverhalten und Barrierefreiheit liefern. Das Stylesheet ist schon dabei.

pnpm add @needless-ui/angular @angular/aria @angular/cdk

Styles importieren

Importiere das Stylesheet einmal in src/styles.css. Es enthält die Design-Tokens und alle Komponenten.

/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';

Alles steckt in @layer nui. Wenn deine App globale Resets wie a { color: inherit } hat, lege sie in einen Layer, der vor nui deklariert ist, damit sie die Komponenten nicht überschreiben.

Komponente verwenden

Importiere die benötigten Direktiven aus ihren Entry Points und füge sie zu den imports deiner Komponente hinzu.

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() {}
}

Nächste Schritte

Sieh dir die Komponenten mit Live-Beispielen an, oder lies die Theming-Anleitung, um alles an deine Marke anzupassen.