Tecla

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

export function KbdDemo() {

El componente kbd representa una tecla: un elemento <kbd> nativo estilizado, sin dependencia de ninguna primitiva, vestido con la receta neobrutalista: bordes gruesos, sombra marcada y tipografía monoespaciada. Ambas variantes de backend comparten el mismo archivo.

Recurre a este componente cuando:

• Paletas de comandos y búsqueda — muestra la pista ⌘ K junto al disparador o dentro del input.
• Elementos de menú y tooltips — coloca el atajo junto a la etiqueta de la acción para que los usuarios lo aprendan sobre la marcha.
• Documentación y changelogs — referencia pulsaciones exactas en línea sin capturas de pantalla.

Instalación#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
npx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/kbd.json
Copiar

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded border-2 bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-sm select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
        className
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }

Uso#

Copiarimport { Kbd } from "@/components/ui/kbd"

Copiar<Kbd>Ctrl</Kbd>

Composición#

Usa la siguiente composición para construir Kbd y KbdGroup:

CopiarKbd
KbdGroup
├── Kbd
└── Kbd

Ejemplos#

Grupo#

Usa el componente KbdGroup para agrupar varias teclas del teclado.

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

export function KbdGroupExample() {

Botón#

Usa el componente Kbd dentro de un componente Button para mostrar una tecla del teclado dentro de un botón.

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

Tooltip#

Puedes usar el componente Kbd dentro de un componente Tooltip para mostrar un tooltip con una tecla del teclado.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

Grupo de entrada#

Puedes usar el componente Kbd dentro de un componente InputGroupAddon para mostrar una tecla del teclado dentro de un grupo de entrada.

import { SearchIcon } from "lucide-react"

import {

RTL#

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

"use client"

import * as React from "react"

Accesibilidad#

Kbd renderiza un elemento <kbd> nativo —la semántica HTML correcta para la entrada de teclado— y es puramente presentacional: pointer-events-none, select-none, nada enfocable. Cuando un atajo funciona de verdad, decláralo también en el control que lo gestiona mediante aria-keyshortcuts (p. ej. aria-keyshortcuts="Control+B" en el botón) para que la tecnología de asistencia pueda anunciarlo. Los lectores de pantalla anuncian de forma inconsistente los glifos de símbolos como ⌘: escribe los nombres de las teclas allí donde el atajo importe.

Referencia de API#

Kbd#

Usa el componente Kbd para mostrar una tecla del teclado.

Copiar<Kbd>Ctrl</Kbd>

KbdGroup#

Usa el componente KbdGroup para agrupar varios componentes Kbd.

Copiar<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>