Needless UI 支援 Angular 22。元件都是獨立指令，因此不需要匯入任何模組。
安裝
執行 ng add。它會加入 Angular 套件，以及提供鍵盤操作與無障礙行為的 Angular Aria 和 CDK，並在你的全域樣式中匯入樣式表。
ng add @needless-ui/angular如果想改為手動設定，請先加入這些套件，再依照下方範例匯入樣式。
pnpm add @needless-ui/angular @angular/aria @angular/cdk匯入樣式
在 src/styles.css 最上方匯入一次樣式表即可，ng add 也會把它放在這個位置。在 Sass 樣式表中，請改用 @use '@needless-ui/css';。樣式表中包含 Design Token 和所有元件。
/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';所有樣式都位於 @layer nui 中。如果你的應用程式有 a { color: inherit } 這類全域重設樣式，請把它們放進一個在 nui 之前宣告的層中，以免覆寫元件樣式。
使用 Tailwind CSS 時，請把 nui 宣告在 Tailwind 的 base 層之後、utilities 層之前：這樣 Tailwind 的重設樣式就無法抵銷元件樣式，而 utility class 依然優先於元件樣式。ng add 偵測到 Tailwind 時會自動這樣做。
/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';使用元件
從各自的進入點匯入所需的指令，並將它們加入元件的 imports 中。
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() {}
}