Kbd

Display keyboard shortcuts and key combinations with semantic markup.

⌘⇧⌥⌃Ctrl+G

Installation

pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/kbd.json

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

<Kbd>Ctrl</Kbd>

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Display keyboard shortcuts in tooltips for better discoverability.

Combine with input groups to show keyboard shortcuts for search and commands.

⌘K

/

⌘⇧F