Kbd

Kbd is a small, typographic helper for showing real keyboard shortcuts in context. Use it to annotate an existing action, command palette, or navigational hint. It works best when the shortcut is already meaningful and the token simply makes it faster to scan.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<p className="flex items-center gap-2 text-sm">
  Press <Kbd>⌘</Kbd>
  <Kbd>K</Kbd> to search
</p>

Why This Primitive Exists

Keyboard hints appear in multiple places across docs, command surfaces, and utility UI. Kbd keeps those tokens visually consistent without forcing each page to rebuild spacing, casing, and sizing by hand.

• Use it for genuine shortcuts like ⌘K, ESC, or /.
• Pair it with nearby copy that names the action clearly.
• Avoid using it as decoration for arbitrary labels or tags.

Examples

Inline Shortcut Hint

The most common use is an inline pairing of instruction and key sequence.

<div className="flex items-center gap-2 text-sm">
  <span className="text-muted-foreground">Open command search</span>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</div>

Size Variants

The component includes three sizes so the key token can stay proportional to surrounding type.

<Kbd size="sm">/</Kbd>
<Kbd>⌘</Kbd>
<Kbd size="lg">ESC</Kbd>

In Context

Keyboard tokens are most effective when attached to a real workflow surface instead of floating on their own.

Guidance

Show Real Commands

• Only render keys that trigger an actual action in the product.
• Keep the nearby label action-oriented so the shortcut reads as an accelerator, not a puzzle.
• For multi-key sequences, render one Kbd per key so the combination stays legible.

Use Size To Match Density

• sm works for dense metadata rows and compact utility hints.
• default should be the baseline for most documentation and app chrome.
• lg is useful when the shortcut sits next to larger headings or hero controls.

Keep Accessibility In Mind

• Do not rely on the key token alone to explain an action.
• Preserve readable text around the shortcut for screen readers and first-time users.
• If a shortcut is critical, document an alternate click or tap path nearby.

API Reference

Kbd

Kbd renders a native kbd element with shared sizing and Swiss typography defaults.

Kbd also accepts the standard React.ComponentProps<"kbd"> API, so native props like children, title, and aria-label work as expected.

Exports