Tecla

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

export function KbdDemo() {

O componente kbd renderiza uma tecla de teclado — um elemento <kbd> nativo estilizado, sem dependência de primitivo, vestido com a receita neobrutalista: bordas grossas, sombra dura e tipografia mono. As duas variantes de backend entregam o mesmo arquivo.

Quando usar:

• Paletas de comando e busca — mostre a dica ⌘ K ao lado do gatilho ou dentro do input.
• Itens de menu e tooltips — coloque o atalho ao lado do rótulo da ação para que o usuário o aprenda ali mesmo.
• Documentação e changelogs — cite teclas exatas no meio do texto, sem capturas de tela.

Instalação#

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>

Composição#

Use a seguinte composição para construir Kbd e KbdGroup:

CopiarKbd
KbdGroup
├── Kbd
└── Kbd

Exemplos#

Grupo#

Use o componente KbdGroup para agrupar várias teclas do teclado.

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

export function KbdGroupExample() {

Botão#

Use o componente Kbd dentro de um componente Button para exibir uma tecla do teclado dentro de um botão.

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

Tooltip#

Você pode usar o componente Kbd dentro de um componente Tooltip para exibir um tooltip com uma tecla do teclado.

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

Input Group#

Você pode usar o componente Kbd dentro de um componente InputGroupAddon para exibir uma tecla do teclado dentro de um grupo de entrada.

import { SearchIcon } from "lucide-react"

import {

RTL#

Para ativar o suporte a RTL no Neobrutalism, consulte o guia de configuração de RTL.

"use client"

import * as React from "react"

Acessibilidade#

Kbd renderiza um elemento <kbd> nativo — a semântica HTML correta para entrada de teclado — e é puramente apresentacional: pointer-events-none, select-none, nada focável. Quando um atalho de fato funciona, declare-o também no controle que o trata via aria-keyshortcuts (por exemplo, aria-keyshortcuts="Control+B" no botão), para que a tecnologia assistiva possa anunciá-lo. Glifos de símbolo como ⌘ são anunciados de forma inconsistente pelos leitores de tela — escreva os nomes das teclas por extenso onde o atalho for importante.

Referência da API#

Kbd#

Use o componente Kbd para exibir uma tecla do teclado.

Copiar<Kbd>Ctrl</Kbd>

KbdGroup#

Use o componente KbdGroup para agrupar vários componentes Kbd.

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