Neba UI

このプロジェクトについて

Neba UI は、アプリケーションの画面を組み立てるための React コンポーネントライブラリです。ボタンと入力欄、メニューとダイアログ、テーブルとタブ、チャート、進捗表示と通知——実際の製品が必要とするものが揃っていて、どれもすでにスタイルが決まり、アクセシビリティを備え、互いに調和しています。画面をもう一度デザインするのではなく、組み立てられます。AI エージェントの画面に要るものも揃っています。プロンプトの入力欄、ストリーミングで流れるテキスト、ツール呼び出し、承認の依頼、推論を見せるパネル、手順の一覧です。neba/a2ui にある A2UI レンダラーは、エージェントが JSON で記述した画面を Neba のコンポーネントに変えます。

すべてのコンポーネントが一つの語彙を共有します。size、color、variant、density、elevation がどこでも同じ意味なので、中サイズのコントロールはどの部品でも同じ高さで、主色はどこでも同じ色です。ロールとラベル、フォーカス管理とキーボード操作はあとから付け足したものではなく部品の中にあり、ダークモードは何も書かなくてもシステム設定に従います。見た目はテーマファイルではなく一つのデザイン言語です。細い線で縁取られた半透明の面、一つに定められた動き、そして求めたときだけ描かれる影です。

導入はパッケージ一つと CSS 一行で終わります。ルートに置くプロバイダーも、組み立てるテーマオブジェクトも、設定ファイルもありません。パッケージは ESM のみ、TypeScript の型定義つきで、本当にツリーシェイキングが効きます。部品ごとに別のモジュールへ分かれるので、ボタンを一つ取り込めばボタン一つ分の重さです。React 18 と 19 で動き、ランタイム依存は二つです。A2UI レンダラーは任意のピア依存を三つ持ち込みますが、レンダラーを取り込まないプロジェクトではそれらが解決されることはありません。すべての部品がスクリーンショットではなく実際に動く例とともに文書化されています。

機能

• ドキュメントサイトあり

• TypeScript 型定義

• 多言語対応

• テストで検証済み

• アクセシビリティ対応

• ダークモード

• ツリーシェイキング対応