Başlarken

Needless UI, Angular 22 ile çalışır. Bileşenler standalone direktiflerdir; bu yüzden içe aktarılacak modül yoktur.

Kurulum

ng add komutunu çalıştırın. Bu komut, Angular paketini klavye ve erişilebilirlik davranışını sağlayan Angular Aria ve CDK ile birlikte ekler, stil dosyasını da genel stillerinize içe aktarır.

ng add @needless-ui/angular

Bunun yerine kurulumu kendiniz yapmak isterseniz paketleri ekleyin, ardından stilleri aşağıda gösterildiği gibi içe aktarın.

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

Stilleri içe aktarın

Stil dosyasını src/styles.css dosyasının en üstünde bir kez içe aktarın; ng add komutu da onu oraya ekler. Bir Sass stil dosyasında ise bunun yerine @use '@needless-ui/css'; yazın. Dosya, tasarım token’larını ve tüm bileşenleri içerir.

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

Her şey @layer nui içinde gelir. Uygulamanızda a { color: inherit } gibi genel sıfırlamalar varsa bileşenleri geçersiz kılmamaları için onları nui katmanından önce tanımlanan bir katmana koyun.

Tailwind CSS kullanıyorsanız nui katmanını Tailwind’in base katmanından sonra, utilities katmanından önce tanımlayın: böylece Tailwind’in sıfırlaması bileşen stillerini silemez, utility sınıfları ise bileşenlerin önüne geçmeye devam eder. ng add, Tailwind’i algıladığında bunu kendisi yapar.

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

Bir bileşen kullanın

İhtiyacınız olan direktifleri giriş noktalarından içe aktarın ve bileşeninizin imports dizisine ekleyin.

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

Sonraki adımlar

Canlı örnekler için bileşenlere göz atın ya da markanıza uyum sağlamak için tema kılavuzunu okuyun.