Tasto

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

export function KbdDemo() {

Il componente kbd rende il tasto di una tastiera — un elemento <kbd> nativo con lo stile applicato, senza dipendenze da primitive, vestito secondo la ricetta neobrutalista: bordi spessi, ombra netta e carattere mono. Entrambe le varianti di backend usano lo stesso file.

Quando usarlo:

• Palette di comandi e ricerca — mostra il suggerimento ⌘ K accanto al trigger o dentro l’input.
• Voci di menu e tooltip — metti la scorciatoia accanto all’etichetta dell’azione, così gli utenti la imparano sul posto.
• Documentazione e changelog — cita nel testo le esatte combinazioni di tasti senza ricorrere a screenshot.

Installazione#

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
Copia

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 }

Utilizzo#

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

Copia<Kbd>Ctrl</Kbd>

Composizione#

Usa la seguente composizione per costruire Kbd e KbdGroup:

CopiaKbd
KbdGroup
├── Kbd
└── Kbd

Esempi#

Gruppo#

Usa il componente KbdGroup per raggruppare i tasti della tastiera.

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

export function KbdGroupExample() {

Pulsante#

Usa il componente Kbd all’interno di un componente Button per mostrare un tasto della tastiera dentro un pulsante.

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

Tooltip#

Puoi usare il componente Kbd all’interno di un componente Tooltip per mostrare un tooltip con un tasto della tastiera.

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

Input Group#

Puoi usare il componente Kbd all’interno di un componente InputGroupAddon per mostrare un tasto della tastiera dentro un input group.

import { SearchIcon } from "lucide-react"

import {

RTL#

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

"use client"

import * as React from "react"

Accessibilità#

Kbd rende un elemento <kbd> nativo — la semantica HTML corretta per l’input da tastiera — ed è puramente presentazionale: pointer-events-none, select-none, niente che possa ricevere il focus. Quando una scorciatoia funziona davvero, dichiarala anche sul controllo che la gestisce tramite aria-keyshortcuts (per esempio aria-keyshortcuts="Control+B" sul pulsante), così le tecnologie assistive possono annunciarla. I glifi simbolici come ⌘ vengono annunciati dagli screen reader in modo incoerente — scrivi i nomi dei tasti per esteso dove la scorciatoia conta.

Riferimento API#

Kbd#

Usa il componente Kbd per mostrare un tasto della tastiera.

Copia<Kbd>Ctrl</Kbd>

KbdGroup#

Usa il componente KbdGroup per raggruppare i componenti Kbd.

Copia<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>