Input：HextaUI と shadcn/ui

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

早見表

項目	HextaUI	shadcn/ui
エクスポートされるパーツ	2	1
ラッパーが処理する props	8	1
ソースの行数	185	19
npm の依存関係	`@base-ui/react@^1.8.0class-variance-authoritycn`	`cn`
構成要素	`motionnumber-flowthemeuse-autosizeuse-composed-refuse-invalid-shakeuse-merged-ref`	–

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

パーツ

HextaUI だけInputCount

両方にあるInput

HextaUI が追加する props

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

プロパティ	内容
`htmlSize`Input	ネイティブの size 属性。size は variant に使われているため、名前を変えています。
`shake`Input	フォームの送信時にこの入力欄が無効と判定されると、1 回揺れます。ネイティブの検証、Base UI の Field、aria-invalid を設定するライブラリで動作します。モーションの低減が有効な場合はスキップされます。
`threshold`InputCount	API リファレンスを見る
`announcement`InputCount	API リファレンスを見る

バリアント

プロパティ	両方にある	HextaUI のみ	shadcn/ui のみ
`size`Input	–	`smdefaultlg`	–

HextaUI 版

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function InputDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-demo-email">Email</Label>
      <Input
        id="input-demo-email"
        type="email"
        autoComplete="email"
        placeholder="[email protected]"
      />
    </div>
  )
}

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

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

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

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

pnpm dlx shadcn@latest add https://hextaui.com/r/input.json --overwrite

上の表の props はすべて追加分なので、shadcn/ui 向けに書いた呼び出しではまだ渡されていません。
切り替える前に、shadcn/ui にだけあるパーツやバリアントを確認し、最も近い HextaUI のものに置き換えてください。

Input：HextaUI と shadcn/ui

早見表

パーツ

HextaUI が追加する props

バリアント

HextaUI 版

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

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

その他の比較