Kbd

Display

Stylized keyboard key badge with size/variant options and key-sequence + symbol mapping.

🚧

Demo coming soon

Add a demo component to DEMOS in _showcase.tsx for display/kbd

Shortcut Key

Unificado

Instalação via CLI

$ npx kikitocn add kbd

Exemplo de uso

KbdExample.tsx

import { Kbd } from "@/components/ui/cn/kbd/Kbd";

export function KbdExample() {
  return (
    <Kbd />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`keys*`	`string[]`	—	Array de teclas a exibir (sequência)
`separator`	`string`	`'⌘'`	Separador entre teclas
`symbols`	`boolean`	`false`	Mapeia nomes de teclas especiais (cmd, shift, enter…) para símbolos e o resto para maiúsculas
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho do badge
`variant`	`'default' \| 'ghost' \| 'solid'`	`'default'`	Estilo visual

Carregando…