Kbd

Stable

Displays a keyboard key or shortcut, inline with text or inside menus and tooltips.

examples/kbd/demo.tsx

⌘K

Press / to search or Esc to close.

Installation

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/kbd.json

Usage

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

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

Examples

Shortcut reference

KbdGroup sets the keys of one combination side by side. Put each physical key in its own Kbd, in the order people press them.

examples/kbd/group.tsx

Command palette: ⌘K
Toggle sidebar: ⌘B
Find in project: ⌘⇧F
Go to line: CtrlG
Delete line: ⌘⌫

Teach shortcuts where people already look: in the tooltip of the button that has one. Inside a tooltip, keys switch to a translucent style that reads on the inverted surface. Declare the shortcut on the control with aria-keyshortcuts too.

examples/kbd/in-tooltip.tsx

In menus

Menus list shortcuts in DropdownMenuShortcut, aligned to the end of each item.

examples/kbd/in-menu.tsx

Platform-aware

Show the modifier people actually have: ⌘ on macOS and iOS, Ctrl everywhere else. Detect the platform on the client and render a neutral default on the server to avoid a hydration mismatch.

examples/kbd/platform.tsx

Search with CtrlK

Showing Windows and Linux keys for this device.

function useIsApple() {
  return React.useSyncExternalStore(
    () => () => {},
    () => /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent),
    () => false
  )
}

In text

Keys sit on the baseline of running text, so instructions can name them in place.

examples/kbd/in-text.tsx

Select a row and press Enter to open it. Use Shift↑ and Shift↓ to extend the selection, and Esc to clear it.

Guidelines

When to use

To show a keyboard shortcut next to the action it triggers.
To reference a key in instructions: Press Esc to close.

When not to use

For code or commands — use inline code.
For buttons people should click — a key cap looks pressable but isn't.

Symbols and names

Use the symbols printed on the keys where they are unambiguous, and words where they aren't.

Key	Write
Command, Option, Shift, Control (macOS)	⌘ ⌥ ⇧ ⌃
Control, Alt (Windows, Linux)	Ctrl, Alt
Return, Delete, Escape	↵ or Enter, ⌫, Esc
Arrows	↑ ↓ ← →
Letters	Uppercase: K, not k

⌘⇧P

Do.One key per cap, in pressing order, with the platform's modifier.

cmd+shift+p

Don’t.A whole combination in one cap, or a mix of symbols and names, is harder to read.

Accessibility

Kbd is semantic. It renders <kbd>, which tells assistive technology the text is keyboard input. Symbols like ⌘ are announced by most screen readers ("command"); when in doubt, add a visually hidden name.
Declare shortcuts on controls. A visible hint helps sighted people; aria-keyshortcuts="Meta+K" on the control tells everyone else.
Don't hijack the platform. Avoid single-letter shortcuts that fire while typing, and never override browser or screen-reader shortcuts.
Contrast. Key text uses muted-foreground, which meets 4.5:1 on the key's surface in both modes.

Kbd