Alert Dialog:HextaUI と shadcn/ui
HextaUI の Alert dialog は shadcn/ui の名前とテーマトークンをそのまま使い、同じ CLI でインストールできます。このページでは、両方のソースから読み取った違いをまとめています。shadcn/ui 側は 2026-10-16 時点の base-vega レジストリです。
早見表
| 項目 | HextaUI | shadcn/ui |
|---|---|---|
| エクスポートされるパーツ | 12 | 12 |
| ラッパーが処理する props | 15 | 3 |
| ソースの行数 | 488 | 187 |
| npm の依存関係 | @base-ui/react@^1.8.0class-variance-authoritycn | cn |
| 構成要素 | buttonsheettheme | button |
ソースが多いこと自体が良いわけではありません。HextaUI の追加の行の多くは、本来なら自分で書くことになる状態、モーション、エッジケースを扱っています。
バリアント
| プロパティ | 両方にある | HextaUI のみ | shadcn/ui のみ |
|---|---|---|---|
sizeAlertDialogHeader | – | defaultsm | – |
sizeAlertDialogFooter | – | defaultsm | – |
variantAlertDialogMedia | – | defaultdestructive | – |
HextaUI 版
すべての状態、キーボード操作、API リファレンスはコンポーネントのページにあります。
このうち 8 個の例には専用のページもあります。
コンポーネントを 1 つ切り替える
add コマンドを --overwrite 付きで実行して @/components/ui の shadcn/ui のファイルを置き換え、残す前に git で差分を確認してください。import はそのままで、置き換えないコンポーネントもそのまま動きます。
pnpm dlx shadcn@latest add https://hextaui.com/r/alert-dialog.json --overwrite- 上の表の props はすべて追加分なので、shadcn/ui 向けに書いた呼び出しではまだ渡されていません。
- 切り替える前に、shadcn/ui にだけあるパーツやバリアントを確認し、最も近い HextaUI のものに置き換えてください。