Kbd

Platform-aware keyboard keycaps with live press feedback and optional shortcut callbacks.

Install with the shadcn CLI

npxnpx shadcn@4.21.5 add @cavemio/kbd

First install? Configure @cavemio once

Run npx shadcn@4.21.5 init if shadcn is not set up, then merge this entry into the registries field in your existing components.json. Keep your other settings and registries.

components.json

{
  "registries": {
    "@cavemio": "https://registry.cavemio.dev/r/cavemio-{name}.json"
  }
}

Overview

Platform-aware keyboard keycaps with live press feedback and optional shortcut callbacks.

Hold keys to see live feedback. Reduced motion keeps color and shadow feedback without movement; demo shortcuts stay local.

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

<Kbd hotkey="k" onTrigger={() => setOpen(true)} stopPropagation aria-label="Open commands" />

Props

Prop	Type	Description
`keys`	`string[] \| string`	Optional. Individual keys as an array or plus-separated string, e.g. mod+shift+p. Display only; hotkey controls callback binding.
`live`	`boolean`	Optional, defaults to false. Track held keys with 1px press feedback. Does not claim keyboard events; disabled suppresses tracking.
`size`	`"sm" \| "md"`	Optional, defaults to md. Individual keycap size for keys or live hotkey feedback.
`hotkey`	`string`	Optional. Key combined with Cmd or Ctrl, e.g. "k". Empty/omitted disables the shortcut.
`label`	`React.ReactNode`	Optional. Action label displayed beside the keycap in a full-size surface.
`onTrigger`	`( event: KeyboardEvent \| React.MouseEvent<HTMLButtonElement>, ) => void`	Optional. Called once by a click, Enter/Space, or the matching global shortcut.
`stopPropagation`	`boolean`	Optional. Stop clicks and matching shortcuts before they reach ancestor handlers.
`ref`	`React.Ref<HTMLButtonElement>`	Optional. Button ref, available when onTrigger is supplied.