104はじめる

Dropdown Menu：HextaUI と shadcn/ui

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

早見表

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

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

HextaUI が追加する props

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

プロパティ内容
showSafeAreaDropdownMenuメニューが開いている間、サブメニューのセーフエリアを描画します。デバッグとデモ用です。
indicatorDropdownMenuCheckboxItemAPI リファレンスを見る
indicatorDropdownMenuRadioItemAPI リファレンスを見る

HextaUI 版

import {
  IconBrandGithub,
  IconCreditCard,
  IconExternalLink,
  IconKeyboard,
  IconLogout,
  IconMail,
  IconMessage,
  IconPlus,
  IconSettings,
  IconUser,
  IconUserPlus,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Open
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>My account</DropdownMenuLabel>
          <DropdownMenuItem>
            <IconUser />
            Profile
            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <IconCreditCard />
            Billing
            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <IconSettings />
            Settings
            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <IconKeyboard />
            Keyboard shortcuts
            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
          </DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <IconUserPlus />
              Invite users
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>
                <IconMail />
                Email
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconMessage />
                Message
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <IconPlus />
                More…
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
          <DropdownMenuItem
            render={<a href="https://github.com" target="_blank" />}
          >
            <IconBrandGithub />
            GitHub
            <IconExternalLink className="ms-auto" />
          </DropdownMenuItem>
          <DropdownMenuItem disabled>API</DropdownMenuItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <IconLogout />
          Log out
          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

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

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

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

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

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

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

その他の比較