Erste Schritte

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

Installation

Führe ng add aus. Der Befehl fügt das Angular-Paket zusammen mit Angular Aria und dem CDK hinzu, die Tastaturverhalten und Barrierefreiheit liefern, und importiert das Stylesheet in deine globalen Styles.

ng add @needless-ui/angular

Möchtest du lieber alles von Hand einrichten, füge die Pakete hinzu und importiere danach die Styles wie unten gezeigt.

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

Styles importieren

Das Stylesheet gehört einmal ganz oben in src/styles.css, wo ng add es auch einfügt. In einem Sass-Stylesheet schreibst du stattdessen @use '@needless-ui/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.

Mit Tailwind CSS deklarierst du nui nach dem base-Layer und vor den Utilities von Tailwind: Dann kann sein Reset die Komponenten nicht überschreiben, und Utility-Klassen setzen sich trotzdem gegen sie durch. ng add erledigt das, wenn es Tailwind findet.

/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';

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.