Empty:HextaUI と shadcn/ui
HextaUI の Empty は shadcn/ui の名前とテーマトークンをそのまま使い、同じ CLI でインストールできます。このページでは、両方のソースから読み取った違いをまとめています。shadcn/ui 側は 2026-10-16 時点の base-vega レジストリです。
早見表
| 項目 | HextaUI | shadcn/ui |
|---|---|---|
| エクスポートされるパーツ | 6 | 6 |
| ラッパーが処理する props | 10 | 1 |
| ソースの行数 | 226 | 103 |
| npm の依存関係 | @base-ui/react@^1.8.0class-variance-authoritycn | cn |
| 構成要素 | theme | – |
ソースが多いこと自体が良いわけではありません。HextaUI の追加の行の多くは、本来なら自分で書くことになる状態、モーション、エッジケースを扱っています。
HextaUI が追加する props
HextaUI のラッパーが自分で処理し、shadcn/ui のラッパーは処理しない props です。Base UI や下位ライブラリにそのまま渡される props は、どちらのバージョンでも使えるため除いています。
| プロパティ | 内容 |
|---|---|
animatedEmpty | 空の状態がマウントされるとき、各パーツを順にフェードアップさせます。モーションの低減が有効な場合はスキップされます。 |
バリアント
| プロパティ | 両方にある | HextaUI のみ | shadcn/ui のみ |
|---|---|---|---|
variantEmpty | – | defaultoutlinemuted | – |
sizeEmpty | – | defaultsm | – |
variantEmptyMedia | defaulticon | stack | – |
HextaUI 版
You’re all caught up
New mentions, reviews and replies land here. Nothing needs you right now.
すべての状態、キーボード操作、API リファレンスはコンポーネントのページにあります。
このうち 15 個の例には専用のページもあります。
コンポーネントを 1 つ切り替える
add コマンドを --overwrite 付きで実行して @/components/ui の shadcn/ui のファイルを置き換え、残す前に git で差分を確認してください。import はそのままで、置き換えないコンポーネントもそのまま動きます。
pnpm dlx shadcn@latest add https://hextaui.com/r/empty.json --overwrite- 上の表の props はすべて追加分なので、shadcn/ui 向けに書いた呼び出しではまだ渡されていません。
- 切り替える前に、shadcn/ui にだけあるパーツやバリアントを確認し、最も近い HextaUI のものに置き換えてください。