Needless UI は Angular 22 で動作します。コンポーネントはスタンドアロンのディレクティブなので、インポートすべきモジュールはありません。
インストール
Angular パッケージを、キーボード操作とアクセシビリティの振る舞いを提供する Angular Aria および CDK と一緒に追加します。スタイルシートも同梱されています。
pnpm add @needless-ui/angular @angular/aria @angular/cdkスタイルのインポート
スタイルシートを src/styles.css で一度だけインポートします。デザイントークンとすべてのコンポーネントが含まれています。
/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';すべては @layer nui に収められています。アプリに a { color: inherit } のようなグローバルなリセットがある場合は、コンポーネントを上書きしないよう、nui より前に宣言したレイヤーに入れてください。
コンポーネントを使う
必要なディレクティブをそれぞれのエントリーポイントからインポートし、コンポーネントの 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() {}
}