HextaUI と shadcn/ui

結論

すっきりした出発点がほしく、読み込み、エラー、空の状態を自分で書くつもりなら shadcn/ui を使ってください。それらの状態、モーション、アクセシビリティの細部をすでに用意しておきたい場合や、shadcn/ui にないコンポーネントが必要な場合は HextaUI を追加してください。1 つのプロジェクトで、コンポーネントごとに両方を併用できます。

変わらないもの

• shadcn CLI でインストールし、ソースコードはプロジェクトにコピーされます。パッケージの中に閉じ込められるものはありません。
• コンポーネントは shadcn/ui の名前、パーツ、props をそのまま引き継ぐため、Dialog、DialogTrigger、DialogContent は想定どおりに動作します。
• スタイリングは Tailwind CSS v4 と、--background、--primary、--radius などの同じテーマトークンを使います。
• ファイルは @/components/ui に配置され、すでにある shadcn/ui のコンポーネントと並びます。

コンポーネントの追加は次のようになります。

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json

HextaUI が追加するもの

• 仕上がった状態表現。ボタンは、返した Promise に応じて保留中、成功、エラーのフィードバックを表示します。スイッチは保存し、失敗時には元に戻します。入力欄は無効なときに揺れます。スピナーは表示までに待機するため、速い処理でもちらつきません。
• 中断できるモーション。アニメーションは 1 組のイージングカーブと時間を共有し、途中で逆再生でき、視差効果の軽減(reduced motion)が有効なときはフェードに切り替わります。
• タッチ、右から左、ハイコントラスト。タッチ画面ではタップ領域が広がり、テキスト入力は iOS でズームされないよう 16px を維持し、レイアウトは右から左の言語向けに反転し、フォーカスリングは Windows のハイコントラストモードでも表示されたままです。
• 執筆時点(2026 年 10 月)で shadcn/ui の一覧にないコンポーネント。たとえば Tree、Video player、Questionnaire、Number flow、Shimmer、Scroll fade などです。
• useButtonFeedback や useDelayedLoading など、単独でインストールできる 9 個のフックと 5 個のユーティリティ。
• チャットスレッド、ツール呼び出し、音声モードなど、AI プロダクト向けの 22 個のブロック。これらは有料の HextaUI Pro に含まれ、Prompt Input は無料です。
• エージェント向けにも書かれたドキュメント。すべてのページに Markdown 版があり、アシスタントから問い合わせられる MCP サーバーも用意されています。

shadcn/ui だけのほうが適している場合

• Radix のプリミティブを使いたい。HextaUI のコンポーネントは Base UI のみをベースにしています。
• できるだけ小さなコンポーネントがほしく、状態やモーションは自分で追加したい。HextaUI のコンポーネントは、より多くのケースを扱うぶんコードが多くなります。
• shadcn/ui のブロック、チャート、テーマ、またはコミュニティによる Vue や Svelte への移植版に依存している。HextaUI は React 専用です。
• 最大のコミュニティと、最も多くのサードパーティ製サンプルが必要。shadcn/ui はどちらもはるかに豊富です。

両方を併用する

名前とトークンが一致しているため、コンポーネントを 1 つずつ置き換えられます。add コマンドを --overwrite 付きで実行すると shadcn/ui のコンポーネントを HextaUI 版に差し替えられるので、採用する前に git で差分を確認してください。置き換えないコンポーネントはそのまま動作します。HextaUI には 65 個のコンポーネントがあり、インストールでは各コンポーネントが前提とするテーマトークンを説明しています。