Kbd

PreviewCopy Anchor Link

Kbd presents a key or key combination. It does not register shortcuts or handle keyboard events. The examples on this page display hints only.

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/kbd.json

Installs Kbd and KbdGroup in one source file. No additional package dependencies are required. Uses your existing cn utility and semantic theme tokens. Input Group, Button, and Tooltip are separate components used in the examples. See the registry guide for local endpoint details.

UsageCopy Anchor Link

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

<Kbd>Enter</Kbd>

<KbdGroup aria-label="Command plus K">
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Both components render native kbd elements and work in Server Components without a client directive.

CompositionCopy Anchor Link

Use Kbd by itself for one key, or group keys that belong to a combination:

KbdGroup (optional)
├── Kbd
├── Separator text (optional, such as +)
└── Kbd

KbdGroup owns the 4px gap between keys. Kbd owns the key surface, padding, and text styling. Nested native kbd elements describe the individual keys within a larger keyboard input. Keep Kbd inside the action or helper text it explains; it is not an interactive control.

With Input GroupCopy Anchor Link

<InputGroup>
  <InputGroupInput aria-label="Search projects" placeholder="Search projects…" />
  <InputGroupAddon align="inline-end">
    <KbdGroup aria-label="Control plus K">
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
  </InputGroupAddon>
</InputGroup>

Import InputGroup, InputGroupInput, and InputGroupAddon from the Input Group module. Only show an active shortcut in a product when the application actually implements it.

With TooltipCopy Anchor Link

Kbd automatically adjusts its foreground and surface inside TooltipContent. The trigger keeps its own accessible name; the shortcut is supplementary help.

AppearanceCopy Anchor Link

Long key names such as Enter and Backspace grow to fit. Kbd has no default shadow and does not receive pointer events.

AccessibilityCopy Anchor Link

• Prefer recognizable key names. Give symbol combinations a readable label, such as aria-label="Command plus Shift plus P" on KbdGroup.
• Hide decorative plus signs from assistive technology when a group label already describes the combination.
• Do not add a tab stop or click handler to a keycap. Put actions on a real button or link.
• Choose shortcut notation for the platform supported by your application. These examples do not detect the user's operating system.

APICopy Anchor Link

Kbd and KbdGroup accept native kbd props, including children, className, ref, and accessibility attributes. Neither component manages state or installs keyboard listeners.

Based on shadcn Kbd.