Kbd : HextaUI et shadcn/ui

Le Kbd de HextaUI garde les noms et les tokens de thème de shadcn/ui et s’installe avec la même CLI. Cette page liste ce qui diffère, lu dans le code des deux. Le côté shadcn/ui correspond à son registre base-vega au 2026-10-16.

En un coup d’œil

Mesure	HextaUI	shadcn/ui
Parties exportées	2	2
Props gérées par l’enveloppe	11	0
Lignes de code	195	26
Dépendances npm	`@base-ui/react@^1.8.0class-variance-authoritycn`	`cn`
Construit avec	`hotkeythemeuse-held-keys`	–

Plus de code n’est pas mieux en soi. La plupart des lignes en plus dans HextaUI gèrent des états, des animations et des cas limites que vous écririez sinon vous-même.

Props ajoutées par HextaUI

Les props gérées par l’enveloppe HextaUI elle-même et pas par celle de shadcn/ui. Les props transmises telles quelles à Base UI ou à la bibliothèque sous-jacente sont exclues, car les deux versions les acceptent.

Prop	Rôle
`listen`Kbd	Enfonce le capuchon tant que sa vraie touche est maintenue. Fonctionne avec keys ou un simple nom de touche en enfant.
`variant`KbdGroup	Transmis à chaque capuchon à l'intérieur.
`size`KbdGroup	Transmis à chaque capuchon à l'intérieur.
`listen`KbdGroup	Transmis à chaque capuchon à l'intérieur.
`separator`KbdGroup	Affiché entre les étapes d'une séquence.

Variantes

Prop	Dans les deux	Seulement HextaUI	Seulement shadcn/ui
`variant`Kbd	–	`keycapflat`	–
`size`Kbd	–	`smdefaultlg`	–

La version HextaUI

⇧Shift⌘CommandP

Press ⌘KCommand K to search, or hold ⇧Shift and watch the keys.

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export function KbdDemo() {
  return (
    <div className="flex flex-col items-center gap-6 text-sm text-muted-foreground">
      <KbdGroup keys="mod+shift+p" size="lg" listen />
      <p>
        Press <Kbd keys="mod+k" listen /> to search, or hold{" "}
        <Kbd keys="shift" listen /> and watch the keys.
      </p>
    </div>
  )
}

Tous les états, les raccourcis clavier et la référence de l’API sont sur la page du composant.

7 de ses exemples ont aussi leur propre page.

Changer un composant

Lancez la commande add avec --overwrite pour remplacer le fichier shadcn/ui dans @/components/ui, puis relisez le diff dans git avant de le garder. Les imports restent les mêmes et les composants que vous ne remplacez pas continuent de fonctionner.

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

Chaque prop du tableau ci-dessus est un ajout, donc le code écrit pour shadcn/ui ne la passe pas encore.
Avant de changer, vérifiez chaque partie ou variante listée seulement pour shadcn/ui et associez-la à l’équivalent HextaUI le plus proche.