104はじめる

Radio Group：HextaUI と shadcn/ui

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

早見表

項目HextaUIshadcn/ui
エクスポートされるパーツ52
ラッパーが処理する props80
ソースの行数18137
npm の依存関係@base-ui/react@^1.8.0cncn
構成要素motiontheme–

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

パーツ

HextaUI だけRadioGroupCardRadioGroupCardTitleRadioGroupCardDescription

両方にあるRadioGroupRadioGroupItem

HextaUI が追加する props

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

プロパティ内容
variantRadioGroupcard はスライドする選択リングを追加します。
radioClassNameRadioGroupCardカード内のラジオ用のクラス。

HextaUI 版

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const options = [
  { value: "all", label: "All new messages" },
  { value: "mentions", label: "Direct messages and mentions" },
  { value: "none", label: "Nothing" },
]

export function RadioGroupDemo() {
  return (
    <RadioGroup
      aria-label="Notify me about"
      defaultValue="mentions"
      className="w-fit"
    >
      {options.map((option) => (
        <label key={option.value} className="flex items-center gap-3 text-sm">
          <RadioGroupItem value={option.value} />
          {option.label}
        </label>
      ))}
    </RadioGroup>
  )
}

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

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

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

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

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

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

その他の比較