Memulai

Needless UI bekerja dengan Angular 22. Komponennya berupa direktif standalone, jadi tidak ada modul yang perlu diimpor.

Instalasi

Tambahkan paket Angular bersama Angular Aria dan CDK, yang menyediakan perilaku keyboard dan aksesibilitas. Stylesheet-nya sudah disertakan.

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

Impor gaya

Impor stylesheet sekali di src/styles.css. Stylesheet ini mencakup design token dan semua komponen.

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

Semuanya berada di dalam @layer nui. Jika aplikasi Anda punya reset global seperti a { color: inherit }, letakkan di layer yang dideklarasikan sebelum nui agar tidak menimpa komponen.

Gunakan komponen

Impor direktif yang Anda perlukan dari entry point masing-masing, lalu tambahkan ke imports komponen Anda.

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

Langkah berikutnya

Jelajahi komponen untuk melihat contoh langsung, atau baca panduan tema untuk menyesuaikannya dengan brand Anda.