Premiers pas

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

Installation

Lancez ng add. La commande ajoute le paquet Angular avec Angular Aria et le CDK, qui fournissent le comportement au clavier et l’accessibilité, et importe la feuille de style dans vos styles globaux.

ng add @needless-ui/angular

Si vous préférez tout configurer à la main, ajoutez les paquets, puis importez les styles comme indiqué ci-dessous.

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

Importer les styles

La feuille de style s’importe une seule fois, en haut de src/styles.css, là où ng add la place. Dans une feuille de style Sass, écrivez plutôt @use '@needless-ui/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.

Avec Tailwind CSS, déclarez nui après la couche base de Tailwind et avant ses utilitaires : son reset ne peut alors pas surcharger les composants, et les classes utilitaires continuent de l’emporter sur eux. ng add s’en charge s’il détecte Tailwind.

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

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.