Kbd

Installation

$ npx shadcn@latest add https://goodui.dev/r/kbd.json

The file lands in components/goodui/kbd.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/kbd works too.

Usage

import { useRouter } from "next/navigation"
import { Search } from "lucide-react"
import { Kbd } from "@/components/goodui/kbd"

export function SearchTrigger({ onOpen }: { onOpen: () => void }) {
  const router = useRouter()

  return (
    <div className="flex items-center gap-4">
      <button type="button" onClick={onOpen} className="flex w-64 items-center gap-2 rounded-lg border px-3 py-2 text-sm text-muted-foreground">
        <Search className="size-4" />
        Search clients and bookings
        <Kbd keys="Mod+K" size="xs" variant="flat" className="ms-auto" onTrigger={onOpen} />
      </button>
      <span className="flex items-center gap-2 text-xs text-muted-foreground">
        Go to calendar <Kbd keys={["G", "C"]} separator="then" onTrigger={() => router.push("/calendar")} />
      </span>
    </div>
  )
}

When to use

Examples

<div className="flex items-center justify-between text-sm">
  <span>New booking</span>
  <Kbd keys="Mod+Shift+B" size="md" />
</div>

<Kbd variant="outline" size="xs" animation="none">Esc</Kbd>

<Kbd
  keys={["G", "T"]}
  separator="then"
  labels={{ then: "dann", keyName: (name) => (name === "Command" ? "Befehl" : name === "Control" ? "Steuerung" : name) }}
/>

API reference

Accessibility

• •Renders a <kbd> wrapping one <kbd> per key, the HTML pattern for key combinations.
• •Symbols (⌘ ⇧ ⌥ ↵ ↑…) are aria-hidden and paired with visually hidden names ("Command", "Shift", "Up arrow"). Translate them with labels.keyName; labels.then translates the visible "then".
• •The + and "then" separators are aria-hidden.
• •Single-key and Shift-only hotkeys are ignored while typing in inputs, textareas, selects and contenteditable, so they do not steal text input. Combos with Mod, Ctrl, Cmd or Alt still fire; allowInInputs makes all of them fire.

Motion

• •press (default): a keycap depresses for as long as its key is held, in 90 ms. raised and solid move down 2px and lose their bottom edge, neo slides into its shadow, flat, outline and glass shrink to 0.92 and tint.
• •glow: the held keycap also gets a tone-colored ring and glow.
• •Reduced motion: keycaps do not move; only the background color changes while a key is held.

• •Every Kbd with animation other than "none", or with onTrigger, adds keydown, keyup and blur listeners on window. In long static lists (menus with 20 shortcuts), use animation="none" and keep onTrigger to the ones you need.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related