Button:HextaUI と shadcn/ui

HextaUI の Button は shadcn/ui の名前とテーマトークンをそのまま使い、同じ CLI でインストールできます。このページでは、両方のソースから読み取った違いをまとめています。shadcn/ui 側は 2026-10-16 時点の base-vega レジストリです。

早見表

項目HextaUIshadcn/ui
エクスポートされるパーツ11
ラッパーが処理する props192
ソースの行数39557
npm の依存関係@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycncn
構成要素spinnerthemeuse-button-feedback–

ソースが多いこと自体が良いわけではありません。HextaUI の追加の行の多くは、本来なら自分で書くことになる状態、モーション、エッジケースを扱っています。

HextaUI が追加する props

HextaUI のラッパーが自分で処理し、shadcn/ui のラッパーは処理しない props です。Base UI や下位ライブラリにそのまま渡される props は、どちらのバージョンでも使えるため除いています。

プロパティ内容
feedbackButtononClick から返された Promise を追跡し、そのステータスを表示します。
resetAfterButton待機状態に戻るまでのミリ秒。
loadingLabelButtonスピナーの隣に表示されます。アイコンサイズでは非表示になります。
successLabelButtonAPI リファレンスを見る
errorLabelButtonAPI リファレンスを見る

バリアント

プロパティ両方にあるHextaUI のみshadcn/ui のみ
variantButtondefaultoutlinesecondaryghostdestructivelinkghost-destructivesuccesserror–
sizeButtondefaultxssmlgiconicon-xsicon-smicon-lgicon-xl–
shapeButton–defaultpill–

HextaUI 版

"use client"

import { Button } from "@/components/ui/button"

function wait(ms: number) {
  return new Promise<void>((resolve) => setTimeout(resolve, ms))
}

async function fail(ms: number) {
  await wait(ms)
  throw new Error("Request failed")
}

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Button feedback onClick={() => wait(900)}>
        Save changes
      </Button>
      <Button feedback variant="outline" onClick={() => fail(900)}>
        Request that fails
      </Button>
      <Button feedback variant="secondary" onClick={() => wait(80)}>
        Fast request
      </Button>
    </div>
  )
}

すべての状態、キーボード操作、API リファレンスはコンポーネントのページにあります。

このうち 15 個の例には専用のページもあります。

コンポーネントを 1 つ切り替える

add コマンドを --overwrite 付きで実行して @/components/ui の shadcn/ui のファイルを置き換え、残す前に git で差分を確認してください。import はそのままで、置き換えないコンポーネントもそのまま動きます。

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json --overwrite
  • 上の表の props はすべて追加分なので、shadcn/ui 向けに書いた呼び出しではまだ渡されていません。
  • 切り替える前に、shadcn/ui にだけあるパーツやバリアントを確認し、最も近い HextaUI のものに置き換えてください。

ほかのコンポーネントの比較

その他の比較