すべてのコンポーネント

Lyra UIの全308コンポーネントを探索できます。ファミリーで絞り込み、名前で検索して、ライブプレビューを試すか、詳しい使用例を開いてください。

会話 & チャット

  • エージェントワークスペース — トランスクリプトとコンポーザーを組み合わせ、実行・ツール・検索・根拠・コンテキストの詳細ペイン(任意)を備えた、AI会話用のレスポンシブな制御シェル。
  • オーディオビジュアライザー — エージェントのアイドル・傾聴・思考・発話の各状態を反映する、キャンバス描画による音声アクティビティの可視化。
  • 分岐ピッカー — 1つのチャットメッセージの再生成・編集済みバリアントを切り替える、制御された「‹ n / m ›」ナビゲーター。
  • チャットコンポーザー — 送信・停止ボタンを内蔵した、自動リサイズ対応のチャットメッセージ入力欄
  • チャットメッセージ — アバター・バッジ・ステータス連動フッターを備えた、ロール別チャットバブルシェル
  • チャットビューポート — 最下部への自動追従、最新メッセージへジャンプするピル、未読区切り線を備えた、トランスクリプトのスクロールコンテナ。
  • チェックポイント — チャットを以前の状態に戻すための、確認付き復元操作を備えたインラインの会話復元ポイント。
  • コードブロック — 遅延読み込み対応のシンタックスハイライト(任意)とコピーボタンを備えたコードブロック表示。
  • コードブロックコア — コンパイル時に指定した文法マップのみでハイライトする、ビルドサイズを抑えたコード表示。
  • 会話アイテム — セッションのタイトル・プレビュー・タイムスタンプを表示する、選択可能なチャット履歴行。
  • 生成ステータス — AIの応答がストリーミングされている間、経過時間・トークン数・スループットを表示。
  • 引き継ぎ区切り線 — トランスクリプト内でエージェント間の制御移譲を示すラベル付き区切り線。
  • Markdown — GFMのテーブル・コード・リンクに対応した、サニタイズ済みのMarkdown→HTMLレンダリング
  • Markdownコア — コンパイル時に指定した文法マップのみでコードをハイライトする、ビルドサイズを抑えたMarkdownレンダリング。
  • メッセージアクション — コピー・再生成・編集・フィードバックを備えた、チャットメッセージ用のメッセージ単位のアクションツールバー。
  • メッセージフィードバック — アシスタントメッセージ1件への高評価/低評価の評価UIで、理由とコメントの詳細パネルをオプションで表示できる。
  • モデル選択 — 固定カタログまたは自由入力によるカスタム指定に対応した、プロバイダー・モデル選択。
  • モデル設定パネル — エージェントを設定するための、モデル選択とtemperatureスライダーのペア。
  • プッシュトゥトーク — マイクの使用許可リクエストから録音、後片付けまでのライフサイクル全体を管理する、押し続けるまたは切り替えて使えるマイク入力ボタン。
  • ストリームステータス — ハートビートを利用したストール検知により、単一のストリーミング接続のフェーズを表示。
  • ストリーミングテキスト — アシスタントのストリーミングテキストを逐次レンダリングし、高頻度なトークン更新をまとめて処理。
  • ストリーミングテキストコア — Markdownモードではコンパイル時に指定した文法マップのみでコードブロックをハイライトする、ビルドサイズを抑えたストリーミングテキストレンダラー。
  • 提案チップ — 選択したテキストをホスト側に渡す、会話の初手または追加質問向けの提案チップをスクロール可能な一列に並べたもの。
  • スレッドリスト — ピン留め・アーカイブ・削除・名前変更の行操作を備えた、グループ化・検索可能な会話用サイドバー。
  • トランスクリプトフィード — 進行中の音声セッション向けのライブ字幕フィードで、暫定結果から確定結果への更新と最下部への自動追従に対応する。
  • タイピングインジケーター — アシスタントが応答を作成中であることを示す、表示専用のプレゼンスインジケーター
  • 使用状況バッジ — 1件のメッセージまたは1回の実行についてトークン数・コスト・レイテンシーをまとめたコンパクトな表示で、ホバーで内訳をツールチップ表示する。
  • ボイスピッカー — 指定されたカタログからTTSの音声を選ぶピッカーで、インライン音声プレビューと、カタログに存在しなくなった選択値の処理に対応する。
  • ウィジェットレンダラー — エージェントがストリーミングする宣言的なJSONウィジェットツリーを、許可リストに登録された型からコンポーネントへのレジストリを通じて描画する。
  • メッセージパーツ — テキスト、推論、ツール、引用、添付、メディアの各プリミティブを使い、順序付きで相互に挿入可能な AI メッセージパーツを描画する。
  • プロンプト入力 — プロンプト作成に添付、モデル・音声・ソース選択、メンション、コマンド、待機中のターンを統合する。
  • プロンプトキュー — 編集、並べ替え、削除、即時送信が可能なフォローアッププロンプトの制御キューを管理する。
  • リアルタイムセッション — 接続、アクティビティ、文字起こし、収録、ミュート、中断を扱うプロバイダー非依存の音声セッション画面を提供する。
  • 選択ツールバー — 選択テキストの文書アンカーを保持しながら、質問、引用、参照、コピーの操作をその近くに配置する。

エージェントツール & オブザーバビリティ

  • アクティビティフィード — エージェントの細かなアクションを追記型でストリーミング表示するログ。実行が完了すると「完了したステップ数」のサマリーに折りたたまれる。
  • エージェント評価ダッシュボード — 指標カードとトレンドチャート、実行ごとのステータス履歴を組み合わせた、制御された評価の概要ビュー。
  • エージェントへの質問 — エージェントやMCPサーバーからの質問に対する構造化された回答を収集し、承諾、拒否、キャンセル操作を提供します。
  • バックグラウンド実行 — ホストが管理する待機中、実行中、完了済みのエージェント作業を表示し、開く操作やキャンセルをリクエストします。
  • 予算メーター — 渡された使用量を上限と比較して表示し、データ取得不可や上限超過の状態も示します。
  • 変更レビュー — ホストから渡されたファイル変更を確認し、変更箇所ごとに保持か破棄かの判断を求めます。
  • コネクター管理 — ホストが管理するコネクターの接続状態を表示し、接続、切断、再試行の操作をリクエストします。
  • 権限の許可 — 対象範囲が定められた権限リクエストを表示し、許可または拒否の選択をホストへ伝えます。
  • 権限ルール — ホストが定義した権限ルールを表示し、許可、確認、拒否の判断の変更をリクエストします。
  • エージェント実行 — 1回のエージェント実行を包む最上位シェルで、ステータス・経過時間・現在のステップ・コストを表示し、キャンセルと再試行のアクションを備える。
  • エージェントトレース — スパン種別のフィルターと、1つの共有スパン配列内の引き継ぎ箇所へのクイックジャンプを備えた、階層的なエージェント/LLMトレースビュー。
  • 承認キュー — 承認待ちのツール呼び出しをキーボード操作で扱えるキューで、各項目を1つの共有ダイアログでレビューして承認または拒否する。
  • アーティファクトパネル — エージェントが生成したアーティファクト1件を囲む枠組みで、プレビュー/コード切り替え、バージョンナビゲーション、コピー・ダウンロード操作を備える。
  • ブラウザフレーム — スクリーンショットストリーム、読み取り専用URL、操作引き継ぎコントロールを表示する、表示専用の「エージェント用コンピューター」ビューポート。
  • コミットカード — diffの統計とファイルごとの変更を示し、diffビューへのリンクを備えた、コンパクトなコミット概要。
  • 比較パネル — アリーナ形式のモデル評価向けに、2つの出力を並べて比較し、勝者に投票できるパネル。
  • 確認バー — ダイアログの代わりにトランスクリプト内に配置される、提案されたエージェントのアクションを承認・拒否するための非モーダルなインラインブロック。
  • コンテキストインスペクター — トークン数の推定値・引用・マスキングマーカー・コピー/エクスポート操作を備えた、モデル呼び出しのコンテキストセグメントを検査するビュー。
  • 評価データセット — 追加・削除・インポート・エクスポートに対応した、フィルタ・タグ付け可能な評価サンプルの一覧。
  • 評価結果 — 1つの評価サンプルの実行結果を比較するための、ルーブリック採点と人によるレビューのサーフェス。
  • 評価実行 — 評価バッチのライブ進捗ビューで、全体の進捗と、根拠やツールトレースを含むサンプルごとの開閉パネルを備える。
  • ポリシーサマリー — ガードレール・権限・プライバシー・ツールポリシーに関する判断の読み取り専用リストで、許可・拒否・要レビューをアクセシブルな説明とともに示す。
  • スパンウォーターフォール — エージェントトレースのスパンを、共有のタイムスケール上にステータス別の色分けバーとして水平タイムライン表示する。
  • スタックトレース — JS/TS、ブラウザ、Pythonのスタックトレースを解析し、内部フレームを折りたたみつつ操作可能なフレーム単位で表示する。
  • タスクリスト — エージェントのプランをステップごとのライフサイクルステータスとネストしたサブステップ付きで追跡する、ライブ更新かつ折りたたみ可能なトラッカー。
  • ターミナル — ストリーミングされるエージェントやツールの出力を表示する読み取り専用のANSIコンソールで、検索と最下部への自動追従に対応する。
  • テスト結果 — ステータス別件数、フィルター切り替え、失敗時に自動展開する詳細を備えた、テストスイートの合格/不合格サマリー。
  • 思考パネル — AIエージェントのリアルタイムまたはレビュー済みの推論過程を表示する、折りたたみ可能なパネル。
  • ツール承認ダイアログ — ツール呼び出しの実行前に、人が承認・拒否・編集を行うためのHuman-in-the-Loopゲート。
  • ツールコールブロック — エージェントのツール呼び出し1件をインラインで表示する折りたたみ式ブロック。展開すると引数・エラー・結果を表示します。
  • ツールコールチップ — エージェントのツール呼び出し1件の名前・ステータス・所要時間をまとめた、コンパクトなインラインピル。
  • ツールパラメータフォーム — ツールのフラットなJSON Schemaから編集可能なフォームを生成し、呼び出し引数を調整できるようにする。
  • ツール結果ダイアログ — ツール呼び出しのステータス・所要時間・結果の詳細全体を表示するモーダルオーバーレイ。
  • ツール結果ビュー — 登録済みのレンダラーを通じてツール呼び出しの結果を表示し、該当がない場合はJSONにフォールバック。
  • ツール選択ダイアログ — 有効にするエージェントツールを選択する、カテゴリ別にグループ化された検索可能なダイアログ。
  • ツールタイムライン — 再試行回数・人による承認ゲート・機微情報フィールドのマスキングを備えた、エージェント実行のツール呼び出しを時系列で示すリスト。
  • トレースツリー — エージェント/LLMトレースのスパン階層を折りたたみ可能な形で表示し、所要時間バーとオプションのトークン数/コスト列を備える。
  • リザルトカード — カスタムのツール結果レンダラーに統一感のあるスモールカードの見た目を与える、枠線付きカードシェル
  • リザルトフィールド — ツール結果カードや高密度なメタデータ表示に適した、コンパクトなラベル/値の行
  • MCP アプリ — 実行可能な MCP App リソースを隔離されたサンドボックスでホストし、ホストへの要求を型付きイベントとして公開する。
  • プロンプトスタジオ — 構造化プロンプトの編集、プレビュー、版管理、保存、実行を行うプロバイダー非依存の作業環境を提供する。
  • スキーマビューア — 制約、必須状態、合成ブランチ、検証問題を備えた選択可能な JSON Schema ツリーを検査する。
  • サブエージェントパネル — 状態、タスク、モデル、進捗、ライフサイクル操作を含むサブエージェント実行の制御階層を表示する。

検索 & ナレッジグラフ

  • コミュニティカード — ナレッジグラフのコミュニティを要約するカードで、メンバーのチップとドリルイン操作を備える。
  • 埋め込みエクスプローラー — ホスト側で投影した埋め込み座標をアクセシブルな2D散布図で表示し、オプションのクラスター色分けとデータ点の選択に対応する。
  • エンティティカード — ナレッジグラフのエンティティ1件について、種別バッジ・プロパティ・次数・グラフ内フォーカス操作を備えたカード。
  • エンティティチップ — エージェントの文章中に埋め込む@エンティティへの言及で、ホバーまたはフォーカス時にプレビューをポップオーバー表示する。
  • エンティティプロフィール — ヘッダー・信頼度の統計値と、関係・裏付けとなるチャンク・根拠のタブを備えた、エンティティの詳細サーフェス。
  • グラフ — パン・ズーム操作可能なフォースディレクテッド型のノードリンク図として、関係性をマッピングする。
  • グラフ凡例 — 対応するグラフ用のノード種別凡例で、表示/非表示フィルターも兼ねる。
  • 取り込みキュー — 取り込みパイプラインを通過していくドキュメントの制御されたリストで、ステージ・進捗・件数、再試行またはキャンセルのリクエストを表示する。
  • ナレッジベース — 検索用ナレッジベースのソース一覧で、同期状況・インデックスの健全性・権限、行ごとの管理リクエストに対応する。
  • ナレッジベース管理 — ナレッジベースのソースと取り込みキューを組み合わせ、管理操作をホスト側に渡す、タブ切り替え式の運用シェル。
  • ナレッジグラフエクスプローラー — グラフ描画・エンティティ検索・種別フィルター・隣接展開・経路探索を組み合わせた、ナレッジグラフの探索シェル。
  • マインドマップ — 階層を空間的に閲覧し、トピックを掘り下げるための放射状に展開できるトピックツリー。
  • 隣接リスト — 1つのエンティティの関係を行として表示し、各行から遷移やグラフ内展開ができる。
  • ノードパレット — フローキャンバスへドラッグまたは配置するための、検索・分類可能なノードライブラリ。
  • パスストリップ — GraphRAGの推論経路を表す、コンパクトでスクロール可能なノード-関係-ノードの連なり。
  • チャンクインスペクター — 取得されたRAGチャンクを関連度スコアバー付きでランキング表示し、ドキュメントビューアーへのディープリンクを備えたリスト。
  • 引用バッジ — ホバープレビューと信頼度・検証状況に応じた色分けを備えたインライン[n]引用マーカー。
  • 根拠サマリー — 裏付け件数・引用カバレッジ・信頼度・警告・根拠引用を示す、主張単位の根拠スコアカード。
  • メモリパネル — 短期的なコンテキストと長期記憶を扱う、信頼度表示と確認付きアクションを備えたエージェントのワーキングメモリサーフェス。
  • 根拠パネル — 1つの回答を支える根拠を、エンティティ・関係・コミュニティ・チャンクへの内訳として折りたたみ可能な形で表示する。
  • RAG回答 — サニタイズ済みのMarkdown・引用バッジ・根拠の評価・展開可能なソースプレビューを組み合わせた、根拠付き回答のサーフェス。
  • 調査の進捗 — ホストから渡された調査の各手順、情報源の件数、全体の完了状況を表示します。
  • 検索結果 — 重複排除・ソースごとのグループ化・選択、コンパクトまたは展開表示のモードに対応した、検索チャンクのランキング一覧。
  • 検索バー — 検索またはRAGのサーフェス向けのクエリバーで、フィルターとスコープのチップ、ベクトル/キーワード/ハイブリッドのモードセレクター、ステータスフィードバックを備える。
  • 検索トレース — 書き換え・埋め込み・検索・リランキング・フィルタリングの各ステージについて展開可能な根拠を示す、検索パイプラインのステージタイムライン。
  • ソースカード — ソースのタイトル・ページ・抜粋を表示し、全文を展開できる引用エントリ。
  • ソースリスト — チャットメッセージの引用カードを1つのヘッダーにまとめて表示する、折りたたみ可能なソースパネル。
  • ソースピッカー — 次の回答の根拠とするソースの範囲を指定する、三状態フォルダー・全選択・検索に対応したチェックボックスツリー。
  • 主張の根拠 — 生成された主張を引用と照合し、裏付け状態、信頼度、根拠を表示する。
  • RAG 評価ダッシュボード — ホストが算出した RAG 品質指標、傾向、評価スライス、実行履歴を表示する。
  • 検索結果の比較 — 順位付きの検索・リランキング結果セットを、重複率とスコア内訳とともに横並びで比較する。

フォーム & 入力

  • ボタン — トーン・サイズのバリエーションとローディング状態を備えた、トークンベースのアクションボタン。
  • チェックボックス — チェック済み・未チェック・中間状態を持つブール値フォームコントロール。
  • チェックボックスグループ — 関連するチェックボックスを、1つのフォーム関連付け・検証済みの複数選択フィールドにまとめる。
  • コードエディタ — 依存関係なしで動作する複数行コード編集エリア。行番号ガター(任意)に対応。
  • カラーピッカー — ラベル、ヒント、バリデーションエラー表示を備えた、フォーム関連付けのネイティブカラー入力。
  • コンボボックス — テキスト入力とリストボックスのポップオーバーを組み合わせた、フィルタ可能な単一・複数選択コンポーネント。
  • 日付入力 — カレンダーポップオーバーを備え、値をISO-8601形式で保持する日付フィールド。
  • 日付ピッカー — 単一の日付または日付範囲を選択できる、インライン表示の月グリッドカレンダー。
  • 絵文字ピッカー — 検索可能でキーボード操作にも対応した、フォームに紐づく絵文字選択コンポーネント。
  • アイコンボタン — コンパクトでアクセシブルなアイコンのみのボタンでアクションをトリガーする。
  • テキスト入力 — ラベル、ヒント、インラインバリデーション表示(任意)を備えた1行テキストフィールド。
  • 国セレクター — 翻訳された名前、国旗、任意の検索機能を使って国や地域のコードを選択します。
  • 通貨セレクター — 翻訳された名前、記号、任意の検索機能を使って通貨コードを選択します。
  • タイムゾーンセレクター — 順序付きリストからタイムゾーン識別子を選択します。検索機能は任意で有効にできます。
  • 単位セレクター — 翻訳された名前、記号、任意の検索機能を使って測定単位を選択します。
  • ロケールピッカー — ライブラリ独自のロケールレジストリを情報源とする、アクティブなロケールを切り替えるためのクローズドリスト形式のドロップダウン。
  • 数値入力 — 最小値・最大値・ステップの制約と、ネイティブの制約検証を備えた数値フィールド。
  • オプション — 値・ラベル・グループ情報・ステータス情報をコンボボックスに渡す、選択可能なオプション。
  • 電話番号入力 — 国を考慮した電話番号フィールド。フォーム値は正規化されたE.164形式。
  • ラジオボタン — セットの中から1つのオプションを選ぶ、フォーム関連付けの単一選択コントロール。
  • ラジオボタングループ — ラベル付きでキーボード操作可能な、単一選択ラジオボタンのグループ。
  • ルーブリックフォーム — 採点・カテゴリ・コメントを設定できるルーブリックと送信して次へ進むフローを備え、AI出力を評価するキューを順番に処理できるフォーム。
  • セレクト — 固定された選択肢の中から1つを選ぶ、クローズドリスト形式のドロップダウン。
  • Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
  • スライダー — LLMの温度パラメータや音量レベルなどの設定に使う、数値範囲コントロール。
  • スウォッチピッカー — 少数の固定カラースウォッチから1つを選択するピッカー。radiogroupの契約を標準搭載。
  • スイッチ — ネイティブフォーム向けのオン/オフスイッチセマンティクスを持つ、ブール値トグルスイッチのフォームコントロール。
  • テキストエリア — 自動拡張、バリデーション、フォームコントロール表示を備えた複数行プレーンテキスト入力。
  • 時刻入力 — 列形式のピッカーが付属した、ロケールに対応したセグメント形式の時刻フィールドです。ブラウザ標準のinput[type=time]体験はlr-native-time-inputです。
  • 時間範囲 — 数値ドメイン上で開始と終了の範囲を選択する、2ハンドルのブラシコントロール。
  • トグル — aria-pressed のセマンティクスでオプションのオン/オフを切り替える、状態を自ら管理する2状態ボタン。
  • トグルグループ — 複数のトグルボタンを1つのタブストップにまとめ、複数選択または解除可能な単一選択に対応します。
  • ネイティブ時刻入力 — Lyraのラベル・ヒント・バリデーション表示でラップしたネイティブ時刻ピッカーで、ブラウザ標準のUIを使いたい場合にセグメント形式のlr-time-inputの代わりに使用する。
  • ワンタイムコード入力 — SMSオートコンプリートに対応した、ワンタイムコードを入力するための分割フィールド。
  • セグメント型ラジオボタン — 丸ではなくボタンの見た目を持つ単一選択コントロールで、通常はlr-radio-groupと組み合わせてセグメントコントロールを構成します。
  • トークン入力 — タグや宛先など、削除可能なトークンのリストを収集する、フォーム関連付けフィールド。

データ表示

  • グラフクエリビルダー — エンティティアンカー・種別フィルター・ホップ数の上限・保存済みクエリを備えた、型付けされたグラフの関係性またはパスのクエリを編集する、フォーム関連付けのエディタ。
  • カレンダー — レスポンシブな月表示カレンダー。イベントマーカーと、キーボードでアクセス可能なアジェンダビューを備える。
  • コンテキストメーター — トークン予算やコンテキストウィンドウの使用量を示す、セグメント式のメーター(バーまたはリング表示)。
  • ドキュメントライブラリ — バージョン・タグ・所有者・鮮度・ソート・一括選択に対応した、検索・フィルタ可能なドキュメント一覧。
  • 環境変数リスト — 環境変数やシークレットをマスク表示するキー/値リストで、行ごとに表示切り替えとコピーができる。
  • ファイルツリー — ツリーコンポーネントをベースにしたファイルエクスプローラー用プリセットで、Gitステータスバッジと遅延ディレクトリ読み込みを備える。
  • フローキャンバス — 視覚的なDAGワークフローを構築・実行するための、パン・ズーム可能なキャンバス。
  • フローコントロール — 対応するフローキャンバス用の、ズーム・フィット・ロックのボタン群。
  • フローミニマップ — 対応するフローキャンバス用の、ドラッグ可能なビューポート枠を持つ隅の全体マップ。
  • フローノード — フローキャンバス用の、見出し・ステータス色・接続ハンドルを備えたワークフローノードカード。
  • フロー実行オーバーレイ — フローキャンバスに実行ステータスの装飾を反映し、簡潔なステップ概要を表示する。
  • ファネル — 各段階のコンバージョン減少を、最初の段階を基準に正規化したバーで表示する。
  • ゲージ — 単一の値をラジアル、リング、またはリニアメーターで表示する。
  • ヒートマップ — 値の行列またはカレンダーグリッドを、リサイズに対応したCanvasベースのヒートマップとして描画する。
  • ページネーション — 編集可能なページジャンプと件数範囲のサマリーを備えた、制御可能なページナビゲーション。
  • クエリビルダー — 表形式またはダッシュボードのデータ向けに、フィールド・演算子・値からなる条件行をAND/ORのコンビネーターで組み合わせる、組み立て可能な構造化クエリビルダー。
  • シーケンスストリップ — カテゴリ別の状態の連なりを、色分けされたセルとオプションのマーカーで可視化する、項目ごとのコンパクトなストリップ。
  • スパークライン — データ系列の推移を、線・塗りつぶしエリア・バーのいずれかでコンパクトなインラインSVGとしてプロットする。
  • 統計 — 単位、トレンドピル、内訳行、任意のスパークラインを備えた単一のKPIを表示する。
  • テーブル — ソート可能なヘッダー、選択、フィルタリング、ページネーションを備えた表示用データテーブル。
  • タイムライン — 監査ログ、エージェントの履歴、変更履歴向けに、過去のイベント行を連結して表示する。
  • タイムラインアイテム — タイムライン用の1件のイベント行。色分けされたマーカー、タイトル、タイムスタンプ、説明を備える。
  • ツリー — グラフ、ドキュメント、ファイルツリーを操作するための、開閉可能な階層構造。
  • ツリーノード — ツリー内の1つのノードとその子要素を再帰的にレンダリングするtreeitem行。
  • ワードクラウド — 依存関係ゼロのSVGタグクラウド。各単語をその重みに応じて拡大縮小する。
  • データグリッド — ソート、フィルタリング、グループ化、ページネーション、選択を備えた、クライアントまたはサーバーの大規模データ向け仮想化データグリッド。

チャート

  • 棒グラフ — 縦棒または横棒でカテゴリごとの値を比較します。
  • 箱ひげ図 — 事前計算済みの五数要約から分布を可視化します。
  • バブルチャート — x・y座標とバブルの半径を使い、1点につき3つの次元をプロットします。
  • チャート — 折れ線・棒・円グラフなど、各種データ可視化の基盤となるChart.jsのコアラッパーです。
  • ドーナツチャート — リング状のセグメントで全体に対する部分の割合を表します。
  • ヒストグラム — 数値データを等幅のビンに分類し、分布を可視化します。
  • 折れ線グラフ — 連続軸上で1つ以上の連結された系列のトレンドを追跡します。
  • ライトチャート — 依存関係なしで棒グラフと折れ線グラフを純粋なSVGとして描画します。Chart.jsは不要です。
  • 円グラフ — 1つの系列が全体に占める割合を示す円グラフです。
  • 極座標エリアチャート — 各カテゴリの値に応じた大きさのくさび形としてプロットする極座標エリアチャートです。
  • レーダーチャート — 放射状グリッド上で1つの系列の複数の指標を比較するレーダーチャートです。
  • 散布図 — 線形軸上に生のx/y座標ペアをプロットする散布図です。

レイアウト & ナビゲーション

  • アコーディオン — 開閉パネルのグループを制御し、必要に応じて複数を同時に開いた状態にできます。
  • アコーディオンアイテム — アコーディオングループに組み込むための開閉可能なパネルです。
  • アプリレール — フル表示・アイコンのみ表示・モバイルでのオーバーレイ表示へと適応する、レスポンシブなナビゲーションレールです。
  • アプリレールグループ — アプリレール内のナビゲーション項目をまとめる、見出し付きで必要に応じて折りたたみできるセクションです。
  • アプリレールアイテム — アプリレール用のアイコンとラベル付きナビゲーション項目で、アイコンのみの折りたたみ状態にも対応します。
  • パンくずリスト — ページ階層内でのユーザーの現在位置を示す、レスポンシブなナビゲーショントレイルです
  • パンくずリストアイテム — パンくずリストのナビゲーショントレイル内にある、1つのリンクまたは現在のページを示すラベルです
  • ボタングループ — 関連するアクションボタンを、ラベル付きでレスポンシブな1つのクラスターにまとめます
  • カード — ヘッダー、メディア、フッター、アクション用のスロットを備えた、枠線付きのコンテンツサーフェスです。
  • カルーセル — キーボード操作、インジケーター、ループ再生、自動再生に対応した、アクセシブルな単一スライド表示のカルーセルです。
  • カルーセルアイテム — カルーセルの子要素に一貫したアイテムスタイルを与える、任意で使用できるセマンティックなスライドラッパーです。
  • コマンドパレット — キーボード操作とショートカットに対応した、検索可能なアプリケーションコマンドメニューです。
  • コントロールグループ — 高さの異なるフォームコントロールとアクションボタンを、中央揃えのレスポンシブな1つの行にまとめます
  • ダッシュボードグリッド — レイアウト項目を配置し、移動・リサイズ・衝突のリクエストを発行する、レスポンシブでキーボード操作可能な制御されたウィジェットグリッド。
  • 詳細 — サマリーの下にコンテンツを展開して表示する、アクセシブルな開閉パネルです。
  • ドックパネル — 既存レイアウトの端にドッキングされる、サイズ変更・折りたたみ可能なパネルです。
  • ドリルダウンパネル — チャートやテーブルのデータ点から、関連する根拠・ドキュメント・エンティティ・エージェント実行へ遷移する、パンくずリスト付きの制御されたナビゲーションシェル。
  • ドロップダウンアイテム — ドロップダウンメニュー内の単一のアクション行を表す、Web Awesome互換のエイリアスです。
  • フィルターバー — Lyraの入力コンポーネントと削除可能なチップを組み合わせた、リセットと読み込み状態に対応するダッシュボード用のフィルター行。
  • メニュー — アクション項目をまとめたインラインのセマンティックメニュー。キーボード操作と入れ子のサブメニューに対応します。
  • メニューアイテム — メニュー用の単一のアクション行で、アイコン、チェックボックス、破壊的アクション用のスタイルを任意で指定できます。
  • 並べ替え項目 — 並べ替えリスト内の1行で、上下移動ボタンと任意のスロットされたコンテンツを組み合わせたもの。
  • 並べ替えリスト — 行ごとのボタンまたはCtrl/Cmd+矢印キーのショートカットで行を並べ替えられる、汎用的な縦並びリスト。
  • メニューラベル — メニュー内の関連する項目をグループ化する、操作不可の見出しです。
  • メニューバー — タイトル付きドロップダウンメニューを並べた水平のアプリケーションメニューバー。キーボード操作に完全対応します。
  • メニューバーアイテム — メニューバーのトップレベルのタイトルで、スロットに入れたメニューを開くか、単純なアクションとして動作します。
  • ナビゲーションメニュー — リンクとフライアウトパネルで構成されるサイトヘッダー用ナビゲーション。幅が足りないときはメニューボタンの中に折りたたまれます。
  • ナビゲーションメニューアイテム — ナビゲーションメニューの1項目。ページへのリンク、またはフライアウトパネルを開く開閉ボタンとして機能します。
  • ページ — ビューポートではなく実際に割り当てられた幅に応じて、ナビゲーションをデスクトップの固定カラムとモバイルのモーダルドロワーに切り替える、セマンティックなアプリケーションシェルです。
  • レスポンシブパネル — デスクトップではコンテンツをインラインでドッキングし、モバイルではオーバーレイシートとして表示します
  • スクローラー — カードやタブの行に対応した、前へ/次への操作を任意で追加できるレスポンシブなオーバーフローサーフェスです。
  • セグメンテッド — 複数のラベル付きオプションから一目でひとつを選択できる、単一選択のボタン行です。
  • スプリット — ダッシュボードをドラッグでサイズ変更可能なパネルに分割し、レスポンシブな折りたたみにも任意で対応します。
  • スプリットパネル — 1本の仕切りでドラッグ操作によりサイズ変更できる2つのペインにコンテンツを分割する、マルチパネルのlr-multi-splitよりシンプルな代替コンポーネントです。
  • ステッパー — 各ステップの状態管理と、クリックによるステップ間ジャンプに対応した、順序付きのマルチステップウィザードでユーザーを誘導します。
  • タブ — 完全なキーボード操作に対応し、light DOM内のパネルを一度に1つだけ表示するタブストリップです。
  • タブ項目 — タブストリップ内でpanel属性とname属性によりパネルと対応付けられる、Web Awesome/Shoelace互換のタブ記述子です。
  • タブパネル — タブストリップ内でname属性とpanel属性によりタブと対応付けられる、Web Awesome/Shoelace互換のパネル記述子です。
  • 仮想リスト — 大規模でスクロール可能なコレクションに対し、画面内の行のみをレンダリングするウィンドウ化されたリストホストです
  • ウィジェット — タイトル付きのパネルシェルで、折りたたみと全画面表示への切り替えを任意で追加できます

オーバーレイ & フィードバック

  • トースト — トースト通知を画面の隅に固定表示する、スタッキング領域。
  • トーストアイテム — 重要度に応じたアクセントカラー、任意のアイコン、自動消去タイマーを備えた、閉じることができる単一のトースト。
  • チップ — タグ、フィルター、スコープを表す小さなピル形状の要素で、必要に応じて削除やトグルが可能です。
  • チップグループ — チップの集合をまとめ、上限を超えた場合は任意で「+N」件のオーバーフロートグルを表示します。
  • アラート — 既定では非表示のアラートメッセージで、タイマーによる自動非表示や共有トーストスタックへの切り替えに対応する。
  • バッジ — 状態、件数、カテゴリをインラインで示すコンパクトなステータスラベル
  • コールアウト — ステータス、警告、エラーの内容を表示する、閉じることができるインラインメッセージ領域。
  • コンテキストメニュー — 任意の領域を、右クリック・長押し・Shift+F10 でアクションメニューを開くターゲットに変えます。
  • ダイアログ — 確認、フォーム、その他の割り込みを伴う操作のための、フォーカスをトラップするモーダルオーバーレイ。
  • ドロワー — フィルターやコンテキストに応じたコントロールのために、ビューポートの任意の端からモーダルパネルをスライドインさせます。
  • ドロップダウン — メニューロールを持つポップオーバーで、アクションリストを呼び出し側が用意したトリガーに紐付けます
  • 空状態 — アイコン、メッセージ、任意のアクションによって、空またはデータなしの状態を伝えます。
  • Kbd — プラットフォームに応じて、キーボードショートカットをキーキャップとして表示するチップ
  • ポップオーバー — クリックで表示し、外側クリックなどで簡単に閉じられる、コンテキストに応じたコンテンツやコントロール用のフローティング表示領域
  • ポップアップ — アンカーに揃えて浮動パネルの位置を保持し続け、ポップオーバーやツールチップの基盤となる低レベルな位置決めプリミティブ。
  • プログレスバー — 確定的または不確定的な水平方向の進捗インジケーターで、任意で値を指定できます。
  • プログレスリング — 中央にラベルを表示できる、円形の確定的または不確定的な進捗インジケーター。
  • レーティング — キーボードでも操作でき、端数精度の部分塗りつぶしに対応したスター評価
  • スケルトン — コンテンツの読み込み中にその代わりとして表示される、アニメーション付きのローディングプレースホルダー。
  • スピナー — 不確定なアニメーション付きビジーインジケーターにより、進行中のバックグラウンドタスクを知らせます。
  • タグ — キーワードやカテゴリのラベル付けのための、バッジ表示の意味的なエイリアス
  • ツールチップ — ホバーとフォーカスで表示され、呼び出し側が用意したトリガーを説明するツールチップ

ドキュメント & ファイルビューア

  • アーカイブビューア — ZIPアーカイブ内のファイル名と展開後のサイズを、内容を展開せずに一覧表示する。
  • カレンダービューア — .icsカレンダーファイルを解析し、予定の件名・日時・場所を表示する。
  • 連絡先ビューア — vCardドキュメントを取得し、連絡先ごとにアクセシブルなカードとして表示する。
  • CSVビューア — CSVファイルを取得し、仮想化されたスクロール可能なシートに行を表示する。
  • データセットビューア — 区切り文字形式のテキストを取得し、型付きでアクセシブルなデータテーブルとして表示する。
  • ドキュメント比較 — 2つのドキュメントバージョンを並べて、またはインラインで比較し、テキストの差分表示とレンダリング済みドキュメントプレビューを組み合わせる。
  • ドキュメントプレビュー — MIMEタイプに応じてドキュメントや添付ファイルをインラインでプレビューし、非対応時はダウンロードにフォールバックする。
  • ドキュメントビューア — プラグイン可能なMIMEタイプ別レンダラーレジストリを使い、ダイアログ内にドキュメントを表示する。
  • DOCXビューア — mammothコンバーターを介して、DOCXファイルをサニタイズ済みのセマンティックHTMLとして表示する。
  • 電子書籍ビューア — オプションのepub.jsピア依存を使い、章ナビゲーション付きでEPUBを表示する。
  • メールビューア — .emlメッセージを解析し、ヘッダー・サニタイズ済み本文・添付ファイルを表示する。
  • GeoJSONビューア — GeoJSONファイルを取得・検証し、その地物を地図上に描画する。
  • ハイライトレイヤー — 配置済みのドキュメントコンテンツ上に、有効化可能なハイライト矩形を描画するオーバーレイ。
  • HTMLビューア — URLを取得し、サニタイズしたうえでHTMLを安全に表示する。
  • インクルード — HTMLフラグメントを取得し、サニタイズ済みのlight DOMページコンテンツとしてトランスクルードする。
  • ノートブックビューア — Markdown・コード・リッチなセル出力を組み合わせて表示する、読み取り専用のJupyterノートブックレンダラー。
  • ページレール — ページ単位のドキュメントをめくるための、仮想化された縦方向のサムネイルレール。
  • PDFビューア — ズーム・ページネーション・選択可能なテキストレイヤーを備え、PDFページを取得して表示する
  • PPTXビューア — PowerPointのPPTXプレゼンテーションをクライアントサイドでベストエフォート表示するビューア。
  • スプレッドシートビューア — .xlsxおよびレガシーな.xlsワークブックを取得し、シートタブと仮想化された行で表示する。
  • SVGビューア — URLからSVGドキュメントを取得し、サニタイズしたうえでインラインに安全に表示する。
  • XMLビューア — XML文書を検査するための、折りたたみ可能かつコピー可能なツリービュー。

メディア & ファイル

  • 添付ファイルチップ — メッセージに添付されたファイルを表すコンパクトなチップで、アップロード状況・進捗・再試行に対応します。
  • アバター — 人物やエンティティを表す、アイコン・画像・イニシャルのフォールバックによる小さなIDマーカー
  • アニメーション画像 — GIF/APNG/WebPのアニメーションを、reduced motion設定に対応した再生/一時停止コントロール付きで再生する。
  • アニメーション — 名前付きプリセットまたはカスタムキーフレームで、スロットされた子要素を宣言的にアニメーションさせる。
  • 添付トリガー — チャット入力欄でファイル選択ダイアログや機能メニューを開く、コンパクトな添付ボタン。
  • AVプレーヤー — 同期したキュー付きトランスクリプト、波形表示、再生速度コントロールを備えた音声/動画プレーヤー。
  • アバターグループ — アバターを重ねてコンパクトな一列に並べ、あふれた分を+Nバッジにまとめる
  • ドロップゾーン — ファイル選択コントロールを自前では持たず、任意の領域をファイルのドロップ先にするドラッグ&ドロップ用ラッパー。
  • ファイルアイコン — MIMEタイプまたはファイル名から判定される、ローカライズ済みのファイル種別バッジ。
  • ファイル入力 — ドラッグ&ドロップとクリックでのファイル選択に対応し、選択されたファイルを発行するドロップゾーン。
  • 国旗 — テーマに対応し、必要に応じて円形にできる枠内に国や言語の旗を表示する。
  • 画像比較 — キーボード操作可能な仕切りをスライドさせ、ビフォー/アフターを並べて比較する。
  • 画像ビューア — 領域ハイライトとオプションの注釈に対応した、パン・ズーム可能なラスター画像ビューア。
  • ライトボックス — 前へ/次へナビゲーションとズームを備えた、全画面モーダル画像ビューア
  • マップ — 宣言的な凡例・コロプレス図・マーカーを備えたMapLibre GLマップラッパー
  • メディアカード — チャットメッセージ内で、画像・動画・添付ファイルをインラインプレビューする。
  • パン・ズーム — スロットされたコンテンツや1枚の画像を、範囲制限付きズームで確認できるスクロール可能な表示エリア。
  • プレイバック — 固定タイマーで範囲内のインデックスを進める、再生/一時停止トランスポート。
  • QRコード — 任意の値をスキャン可能なQRコードシンボルとしてエンコードし、canvasに描画する。
  • 動画 — カスタムコントロールと選択可能な字幕、サムネイルプレビューを備えたインライン動画プレーヤー。
  • 動画プレイリスト — 一連の動画をナビゲート可能なプレイリストで再生し、自動的に次の動画へ進みます。
  • ズーム可能フレーム — 個別のズームコントロールを備えたサンドボックス化されたiframeプレビューです。以前のスロット/画像検査機能はlr-pan-zoomに移行しました。

ユーティリティ

  • インターセクションオブザーバー — スロットされたターゲットがビューポートに出入りする際に、ネイティブのインターセクションエントリを発行します。
  • ミューテーションオブザーバー — スロットされたDOM内の要素と属性の変更を監視し、ネイティブのミューテーションレコードを転送します
  • リサイズオブザーバー — スロットされた要素を監視し、視覚的な装飾を伴わずに型付けされたリサイズエントリを発行します
  • コピーボタン — テキスト値をクリップボードにコピーし、チェックマークでフィードバックを表示するアイコンのみのボタン。
  • 差分ビュー — 2つの文字列間の実際の行単位差分を、色分けされたunified-diff形式で描画する。
  • ディバイダー — コンテンツを水平または垂直に分割する、テーマ対応のセマンティックなセパレーター。
  • エクスポートボタン — テーブルデータをCSVまたはJSON形式でダウンロード。単一形式指定、またはフォーマット選択メニュー経由で利用できる。
  • バイト数フォーマット — 単位ステップと精度を調整できる、ロケール対応のバイトサイズフォーマット。
  • 日付フォーマット — Intl.DateTimeFormatによる、ロケール対応の日付・時刻フォーマット。
  • 数値フォーマット — Intl.NumberFormatによる、ロケール対応の数値・通貨・コンパクト表記フォーマット。
  • アイコン — 依存関係ゼロで、組み込みの名前付きパスセットからくっきりとしたインラインSVGグリフを描画する。
  • JSONビューア — 任意のJSONペイロードを検査できる、折りたたみ可能かつコピー可能なツリービュー
  • 既知の日付 — ユーザーが既に把握している日付を入力するための、日・月・年の3フィールド入力
  • ライブリージョン — スクリーンリーダーへの通知を間引く、視覚的に非表示のARIAライブリージョン
  • メンションポップオーバー — テキストフィールド内の@メンションおよびスラッシュコマンドに対応する、キャレット位置に追従するオートコンプリート。
  • ポーリングステータス — 一時停止・再開コントロールを内蔵した、次回のスケジュール更新までのカウントダウン表示。
  • ランダムコンテンツ — A/Bテスト用コピーやお客様の声向けに、スロット化された子要素をランダムまたは順番に切り替えて表示する
  • 相対時刻 — 自動的に更新される、ロケール対応の相対タイムスタンプを表示する。
  • ツアー — 初回起動時のプロダクトオンボーディング向けに、スポットライトとステップで案内するガイド付きウォークスルー。
  • 視覚的に非表示 — コンテンツを視覚的に非表示にしつつ、スクリーンリーダーには読み上げ可能な状態を保ち、フォーカス時に再び表示する。