コンポーネント
@murasakijs/ui が提供するコンポーネント。
@murasakijs/ui は、スキャフォールドがデフォルトでインストールするコンポーネントライブラリです — React Aria Components をベースに、Tailwind CSS と class-variance-authority でスタイリングされており、shadcn/ui ユーザーにはおなじみの cn() の作法をそのまま使っています。各ページは実際に公開されている API を説明しており、プレビューがあるページでは公開版のコンポーネントをそのまま描画しています。
コンポーネントライブラリがスキャフォールドされたアプリにどう組み込まれるか（スタイルシートの読み込み、Tailwind プリセット、ダークモード）については、Styling ガイドを参照してください。
フォームとコントロール
Button
ボタン、またはボタンのように見えるコンポーネントを表示します。
Button Group
関連するボタンを一つのまとまりとして表示します。
Input
フォームの入力フィールド、または入力フィールドのように見えるコンポーネントを表示します。
Input Group
入力欄とテキスト、アイコン、操作を一体化します。
Label
フォームコントロールにアクセシブルなラベルを表示します。
Field
ラベル、コントロール、補足、入力エラーを一つの項目として構成します。
Textarea
複数行のテキスト入力を表示します。
Checkbox
チェック状態を切り替えます。
Radio Group
複数の選択肢から1つを選びます。
Switch
設定のオン・オフを切り替えます。
Slider
指定した範囲から1つ以上の数値を選択します。
Toggle
ボタンの押下中・未押下を切り替えます。
Toggle Group
トグルを単一選択または複数選択のコントロールとしてまとめます。
Select
ボタンで開く、ユーザーが選択肢から選べるリストを表示します。
Native Select
OS 標準の選択 UI を表示します。
データ表示
Badge
状態やカテゴリをコンパクトなラベルで表示します。
Card
ヘッダー・コンテンツ・フッターを持つカードを表示します。
Avatar
ユーザーや対象の画像をフォールバック付きで表示します。
Separator
コンテンツを視覚的または意味的に区切ります。
Skeleton
コンテンツの読み込み中にプレースホルダーを表示します。
Table
行と列で構造化されたデータを表示します。
Item
画像、本文、操作を持つ再利用可能な行を構成します。
Empty
空状態の理由と次に行える操作を示します。
Kbd
キーまたはキーボードショートカットを表示します。
Scroll Area
ネイティブのスクロール動作を維持しながら、一貫したスタイルのスクロールバーを追加します。
フィードバック
オーバーレイとメニュー
Dialog
プライマリウィンドウまたは他のダイアログウィンドウの上に重ねて表示されるウィンドウです。
Alert Dialog
先へ進む前に明示的な判断を求めます。
Sheet
画面端から補助コンテンツを表示するパネルです。
Popover
コントロールから開くリッチなコンテンツをポータルに表示します。
Hover Card
リンクのホバーまたはフォーカス時に補助情報をプレビューします。
Tooltip
ホバーまたはフォーカス時に補足情報を表示します。
Dropdown Menu
ボタンで開く、メニューをユーザーに表示します。
Context Menu
右クリックまたはキーボードで選んだ対象の操作を表示します。
Menubar
キーボードで移動できるアプリ内の常設メニューです。