Kbd: HextaUI y shadcn/ui

El Kbd de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

Medida	HextaUI	shadcn/ui
Partes exportadas	2	2
Props que gestiona el envoltorio	11	0
Líneas de código	195	26
Dependencias de npm	`@base-ui/react@^1.8.0class-variance-authoritycn`	`cn`
Construido con	`hotkeythemeuse-held-keys`	–

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Props que añade HextaUI

Props que gestiona el propio envoltorio de HextaUI y el de shadcn/ui no. Se omiten las props que pasan directamente a Base UI o a la librería subyacente, porque ambas versiones las aceptan.

Prop	Qué hace
`listen`Kbd	Hunde el cap mientras su tecla real está pulsada. Funciona con keys o con un nombre de tecla simple como children.
`variant`KbdGroup	Se pasa a cada cap del interior.
`size`KbdGroup	Se pasa a cada cap del interior.
`listen`KbdGroup	Se pasa a cada cap del interior.
`separator`KbdGroup	Se muestra entre los pasos de una secuencia.

Variantes

Prop	En ambos	Solo HextaUI	Solo shadcn/ui
`variant`Kbd	–	`keycapflat`	–
`size`Kbd	–	`smdefaultlg`	–

La versión de 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>
  )
}

Todos los estados, el mapa de teclado y la referencia de la API están en la página del componente.

7 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

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

Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.