無駄なほど丁寧に作り込んだ UI コンポーネント。

存在理由

• ネイティブ要素ファースト

  <button nuiButton> は本物のボタンです。何もラップしていないので、フォームもキーボードもスクリーンリーダーもそのまま動作します。

• スタイルシートは1つ、フレームワークは自由

  コンポーネントはカスケードレイヤーに収めた素の CSS です。現在は Angular、次は React に対応し、素の HTML ならいつでも使えます。

• アプリの CSS が常に優先

  すべてが @layer nui に収められているため、!important を使ったり詳細度を競ったりしなくても、独自のスタイルで上書きできます。

• 設計段階からアクセシブル

  パレットの生成時に、すべての色の組み合わせを WCAG 2.2 AA の基準でチェックしています。フォーカス、強制カラーモード、動きを減らす設定にも対応済みです。

• 無駄なほどカスタマイズ可能

  スプリング、押下エフェクト、登場アニメーション、角の形、角丸、密度。アプリ全体なら属性1つ、コンポーネントごとなら入力1つで設定でき、標準の W3C デザイントークンをベースにしています。

• モダンな Angular

  シグナル入力、Zoneless、サーバーサイドレンダリングに対応。コンポーネントごとにエントリーポイントがあるので、アプリにはインポートしたものだけが含まれます。

インポート2つで完了

パッケージを追加し、スタイルシートを一度インポートすれば、あとはどのスタンドアロンコンポーネントでも使えます。

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

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