Premiers pas

Needless UI fonctionne avec Angular 22. Les composants sont des directives standalone : il n’y a aucun module à importer.

Installation

Ajoutez le paquet Angular avec Angular Aria et le CDK, qui fournissent le comportement au clavier et l’accessibilité. La feuille de style est incluse.

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

Importer les styles

Importez la feuille de style une seule fois dans src/styles.css. Elle contient les design tokens et tous les composants.

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

Tout est livré dans @layer nui. Si votre application a des resets globaux comme a { color: inherit }, placez-les dans une couche déclarée avant nui pour qu’ils ne surchargent pas les composants.

Utiliser un composant

Importez les directives dont vous avez besoin depuis leurs points d’entrée et ajoutez-les aux imports de votre composant.

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

Pour aller plus loin

Parcourez les composants pour voir des exemples interactifs, ou lisez le guide des thèmes pour les accorder à votre charte graphique.