Needless UI

Open source · Angular 22 · MIT

Des composants d’interface, inutilement bien conçus.

Needless UI met en forme les éléments natifs avec une seule feuille de style indépendante du framework et des design tokens du W3C. Ses directives Angular y ajoutent le comportement d’Angular Aria : chaque composant est accessible dès le premier rendu.

Commencer Parcourir les composants

Sa raison d’être

  • Les éléments natifs d’abord

    <button nuiButton> est un vrai bouton. Formulaires, clavier et lecteurs d’écran fonctionnent, puisque rien ne vient l’envelopper.

  • Une feuille de style pour tous les frameworks

    Les composants sont du CSS pur, rangé dans des couches de cascade : Angular aujourd’hui, React ensuite et HTML simple, toujours.

  • Votre CSS a toujours le dernier mot

    Tout est livré dans @layer nui : vos propres styles l’emportent sans !important ni bataille de spécificité.

  • Accessible par construction

    Chaque paire de couleurs est vérifiée selon les WCAG 2.2 AA lors de la génération de la palette. Focus, couleurs forcées et réduction des animations sont gérés pour vous.

  • Inutilement personnalisable

    Ressorts, effets d’appui, animations d’entrée, formes des coins, rayon et densité : un attribut pour toute l’application, ou un input par composant, sur des design tokens W3C standard.

  • Un Angular moderne

    Signal inputs, zoneless, rendu côté serveur et un point d’entrée par composant : les applications n’embarquent que ce qu’elles importent.

Deux imports et le tour est joué

Ajoutez le paquet, importez la feuille de style une fois, puis utilisez les composants dans n’importe quel composant standalone.

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