コンポーネント

4 種類のバリアント・3 サイズ・ローディング状態を備えたボタン。Radix の asChild パターンにも対応。

Radix UI ベースのアクセシブルなチェックボックス。ラベルやエラー状態の表示に対応。

単一行のテキスト入力フィールド。サイズのプリセットやエラー状態・インラインメッセージに対応。

Radix UI ベースのラジオボタングループ。サイズやエラー状態をコンテキスト経由で全アイテムに伝播。

Radix UI ベースのアクセシブルなドロップダウンセレクト。検索・グループ化・エラー状態に対応し、キーボード操作も可能。

Radix UI ベースのトグルスイッチ。ラベルやエラー状態の表示に対応。

丸形の画像表示コンポーネント。画像が未指定または読み込みに失敗した場合、イニシャルを自動で表示。

ステータスやカウント、カテゴリを示すインラインラベル。

ステータスメッセージを表示するインラインバナー。エラーや警告には role="alert"、情報や成功を表すには role="status" を使用。

パルスアニメーション付きのローディングプレースホルダー。テキスト（単行・複数行）・円形・矩形に対応。

Radix UI ベースの一時的なオーバーレイ通知。アプリを ToastProvider と ToastViewport で一度ラップすれば、どこからでも表示可能。

星をテーマにしたアニメーションを含む背景コンポーネント。

ホバー時にリフトするコンテンツコンテナ。ヘッダー・コンテンツ・フッターのスロットを持つ複合コンポーネント。

グリッドレイアウトのサイトフッター。コンテンツエリア・区切り線・ボトムバーを備えた複合コンポーネント。

スティッキー配置やバックドロップブラーに対応した柔軟なサイトヘッダー。レスポンシブなモバイルメニュー付き。

フルページの CSS グリッドレイアウト。シングル・左サイドバー・右サイドバー・3 カラムのプリセットを用意。

セマンティックな <section> ラッパー。最大幅のプリセットと縦パディングを制御でき、コンテンツを中央揃えで配置。

コンテンツ間の区切り線。水平・垂直の向きに対応し、装飾用・セマンティック用を選択可能。

Flexbox ベースのレイアウトプリミティブ。スペーシングトークンに基づくギャップで、縦・横のスタックを構成。

アクセシブルなパンくずナビゲーション。nav 要素の aria-label や aria-current="page" に対応。

Radix UI ベースのタブパネル。アンダーライン（line）とピル（solid）の 2 種類のバリアントを用意し、キーボード操作にも対応。

アニメーション付きオーバーレイを備えたモーダルダイアログ。フォーカストラップ・スクロールロック・キーボード操作に対応。

Radix UI ベースのホバーツールチップ。TooltipProvider でアプリを一度ラップするだけで使用可能。

h1〜h6 のセマンティックな見出し要素。見た目のサイズ・ウェイト・配置を意味レベルと独立して設定可能。

多様な要素（p・span・div・label）として描画できるテキストプリミティブ。サイズ・ウェイト・カラー・テキスト省略を制御可能。