Needless UI

Open source · Angular 22 · React 19 · MIT

Componenti UI, progettati con una cura inutilmente accurata.

Componenti Angular accessibili su elementi nativi, con un unico foglio di stile indipendente dal framework. Tutto con licenza MIT, anche ciò che altre librerie vendono a parte: un pianificatore con timeline delle risorse e una griglia dati con raggruppamento ed esportazione in Excel.

Inizia Sfoglia i componenti

Perché esiste

  • Nessuna versione premium

    La timeline delle risorse e gli eventi ricorrenti del pianificatore, e il raggruppamento, i dati ad albero e l’esportazione in Excel della griglia dati, hanno licenza MIT come tutto il resto: nessuna chiave di licenza, nessuna filigrana. Passi da una libreria a pagamento? Leggi le guide per chi arriva da FullCalendar e da AG Grid.

  • Prima gli elementi nativi

    <button nuiButton> è un vero pulsante. Moduli, tastiera e screen reader funzionano perché niente lo avvolge.

  • Un foglio di stile per ogni framework

    I componenti sono CSS puro in cascade layer: Angular oggi, React finora per il pianificatore e la griglia dati, HTML semplice sempre.

  • Il tuo CSS vince sempre

    Tutto è dentro @layer nui, quindi i tuoi stili lo sovrascrivono senza !important né battaglie di specificità.

  • Accessibile per costruzione

    Ogni coppia di colori viene verificata rispetto alle WCAG 2.2 AA quando si genera la palette. Focus, forced colors e riduzione del movimento sono già gestiti.

  • Inutilmente personalizzabile

    Molle, effetti alla pressione, animazioni di entrata, forme degli angoli, raggio e densità: un attributo per tutta l’app o un input per componente, su design token W3C standard.

  • Angular moderno

    Input signal, zoneless, rendering lato server e un entry point per componente: le app includono solo ciò che importano.

Un comando, poi un import

Esegui ng add per installare il pacchetto e importarne il foglio di stile, poi usa i componenti in qualsiasi componente standalone.

ng-add.sh
ng add @needless-ui/angular
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() {}
}