Shadcn.io is not affiliated with official shadcn/ui
Kbd
Keyboard shortcut badges for displaying hotkeys and key combinations in React
Kbd preview
Scroll to load preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this component for you — no copy-paste, no CLI:
use shadcnio to install the kbd component into my projectRelated Components
FAQ
Was this page helpful?
Sign in to leave feedback.