Kbd: HextaUI e shadcn/ui

O Kbd do HextaUI mantém os nomes e tokens de tema do shadcn/ui e instala com a mesma CLI. Esta página lista o que muda, lido do código de ambos. O lado do shadcn/ui é o registro base-vega em 2026-10-16.

Visão geral

Medida	HextaUI	shadcn/ui
Partes exportadas	2	2
Props tratadas pelo wrapper	11	0
Linhas de código	195	26
Dependências do npm	`@base-ui/react@^1.8.0class-variance-authoritycn`	`cn`
Construído com	`hotkeythemeuse-held-keys`	–

Mais código não é melhor por si só. A maior parte das linhas extras do HextaUI cuida de estados, animações e casos extremos que você escreveria por conta própria.

Props que o HextaUI adiciona

Props que o próprio wrapper do HextaUI trata e o do shadcn/ui não. Props repassadas direto ao Base UI ou à biblioteca por baixo ficam de fora, porque as duas versões as aceitam.

Prop	O que faz
`listen`Kbd	Pressiona a tecla enquanto a tecla real está pressionada. Funciona com keys ou com o nome simples de uma tecla como children.
`variant`KbdGroup	Repassado a todas as teclas dentro do grupo.
`size`KbdGroup	Repassado a todas as teclas dentro do grupo.
`listen`KbdGroup	Repassado a todas as teclas dentro do grupo.
`separator`KbdGroup	Exibido entre as etapas de uma sequência.

Variantes

Prop	Em ambos	Só HextaUI	Só shadcn/ui
`variant`Kbd	–	`keycapflat`	–
`size`Kbd	–	`smdefaultlg`	–

A versão do 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 os estados, o mapa de teclado e a referência da API estão na página do componente.

7 dos seus exemplos também têm uma página própria.

Troque um componente

Rode o comando add com --overwrite para substituir o arquivo do shadcn/ui em @/components/ui e revise o diff no git antes de mantê-lo. Os imports continuam iguais e os componentes que você não trocar seguem funcionando.

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

Cada prop da tabela acima é nova, então o código escrito para o shadcn/ui ainda não a passa.
Antes de trocar, confira qualquer parte ou variante listada só para o shadcn/ui e associe-a à mais próxima do HextaUI.