Needless UI

オープンソース · Angular 22 · React 19 · MIT

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

フレームワーク非依存の単一のスタイルシートでスタイルを付けた、ネイティブ要素ベースのアクセシブルな Angular コンポーネントです。ほかのライブラリなら別売りの機能まで、すべて MIT ライセンスです。リソースタイムラインを備えたスケジューラーも、グループ化と Excel エクスポートに対応したデータグリッドも含まれます。

はじめる コンポーネントを見る

存在理由

  • 有料版なし

    スケジューラーのリソースタイムラインと繰り返しの予定も、データグリッドのグループ化、ツリーデータ、Excel エクスポートも、ほかのすべてと同じく MIT ライセンスです。ライセンスキーも透かしもありません。有料ライブラリから乗り換えるなら、FullCalendar と AG Grid からの移行ガイドをご覧ください。

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

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

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

    コンポーネントはカスケードレイヤーに収めた素の CSS です。現在は Angular に対応し、React では今のところスケジューラーとデータグリッドが使えます。素の HTML ならいつでも使えます。

  • アプリの CSS が常に優先

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

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

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

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

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

  • モダンな Angular

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

コマンド1つ、あとはインポート1つ

ng add を実行すると、パッケージのインストールとスタイルシートのインポートが済みます。あとは、どのスタンドアロンコンポーネントでも使えます。

ng-add.sh
ng add @needless-ui/angular
usage.ts
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() {}
}