Kbd

Keyboard shortcut badges for displaying hotkeys and key combinations in React

Display keyboard shortcuts like ⌘+K as styled key badges. Multiple keys automatically get a + separator between them. Works well for command palettes, settings pages, tooltips, or documentation where you're showing users keyboard shortcuts.

Kbd preview

Scroll to load preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/kbd.json

npx shadcn@latest add https://www.shadcn.io/r/kbd.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/kbd.json

bunx shadcn@latest add https://www.shadcn.io/r/kbd.json

Combobox

Searchable dropdown

QR Code

Scannable codes

Code Block

Syntax highlighting

Pill

Status badges

FAQ

Was this page helpful?

Comparison Slider

Before/after image comparison slider with draggable divider for React

Qr Code

QR code generator component with theme-aware colors for React

Kbd

Kbd preview

Installation

Related Components

Combobox

QR Code

Code Block

Pill

FAQ

How do I show ⌘+K style combos?

What symbols should I use for modifier keys?

Can I change the separator?

The keys look too small. How do I make them bigger?