Kbd
UtilitiesA component for displaying keyboard keys and shortcuts. Use Kbd to show keyboard interactions, hotkeys, or command shortcuts in your documentation.
Import
import { Kbd, KeyboardShortcut } from "@/components/ui/kbd";Usage
Single Keys
Individual keyboard keys
EnterEscTabSpaceBackspace
Key Combinations
Multiple keys for shortcuts
⌘K⌘S⌘⇧P⌃⌥⌦
With Labels
Shortcuts with descriptive labels
Search⌘KSave⌘SCommand Palette⌘⇧PClose⎋
Sizes
Different key sizes
SmMdLg
Common Shortcuts
Pre-defined keyboard shortcuts
Copy⌘C
Paste⌘V
Undo⌘Z
Redo⌘⇧Z
Responsive Behavior
Keyboard keys automatically scale down on smaller screens
Scales with viewport
⌘⇧P→Command Palette
Cut⌘X
Copy⌘C
Paste⌘V
API Reference
keys—string | string[]Key(s) to display
variant"default""default" | "outline" | "flat"Visual style
size"md""sm" | "md" | "lg"Size of the key
| Prop | Type | Default | Description |
|---|---|---|---|
keys | string | string[] | — | Key(s) to display |
variant | "default" | "outline" | "flat" | "default" | Visual style |
size | "sm" | "md" | "lg" | "md" | Size of the key |