Needless UI

Açık kaynak · Angular 22 · MIT

Arayüz bileşenleri, gereğinden fazla özenle tasarlandı.

Needless UI, yerel öğeleri framework’ten bağımsız tek bir stil dosyası ve W3C tasarım token’larıyla biçimlendirir. Angular direktifleri ise Angular Aria’nın sağladığı davranışı ekler; böylece her bileşen ilk görüntülendiği andan itibaren erişilebilirdir.

Hemen başlayın Bileşenlere göz atın

Neden var?

  • Önce yerel öğeler

    <button nuiButton> gerçek bir düğmedir. Etrafına hiçbir şey sarılmadığı için formlar, klavye ve ekran okuyucular sorunsuz çalışır.

  • Tek stil dosyası, her framework

    Bileşenler, CSS katmanlarına (cascade layers) yerleştirilmiş düz CSS’tir: bugün Angular, sırada React, düz HTML ise her zaman.

  • CSS’iniz her zaman kazanır

    Her şey @layer nui içinde gelir; bu sayede kendi stilleriniz, !important kullanmadan ve özgüllük savaşlarına girmeden onu geçersiz kılar.

  • Yapısı gereği erişilebilir

    Palet oluşturulurken her renk çifti WCAG 2.2 AA ölçütlerine göre denetlenir. Odak, forced colors ve azaltılmış hareket sizin için halledilir.

  • Gereğinden fazla özelleştirilebilir

    Yaylar, basma efektleri, giriş animasyonları, köşe şekilleri, yarıçap ve yoğunluk: standart W3C tasarım token’ları üzerinde, tüm uygulama için tek bir nitelik ya da bileşen başına tek bir girdi.

  • Modern Angular

    Signal tabanlı girdiler, zoneless çalışma, sunucu tarafında render ve bileşen başına bir giriş noktası: uygulamalar yalnızca içe aktardıklarını paketler.

İki içe aktarma, hepsi bu

Paketi ekleyin, stil dosyasını bir kez içe aktarın, ardından bileşenleri herhangi bir standalone bileşende kullanın.

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