React Button Group - Keyboard Shortcuts
Button group with keyboard shortcuts displayed using Kbd component for shortcut visibility
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Keyboard shortcuts accelerate workflows—visible shortcuts enable discovery. This React component combines shadcn/ui's Button, ButtonGroup, and Kbd components with Lucide React icons (CopyIcon, SaveIcon, DownloadIcon) displaying keyboard shortcuts within buttons. Built on Radix UI with Kbd component rendering shortcut badges (⌘C, ⌘S, ⌘E), the pattern shows shortcuts in horizontal and vertical orientations. Perfect for desktop applications like VS Code or Figma showing file operations, productivity tools displaying common actions, developer tools with frequent operations, or any power-user interface where shortcuts should be discoverable—visible shortcuts reduce learning curve, Kbd component provides consistent styling, button groups organize shortcut-enabled actions. The pattern bridges discoverable button interfaces with efficient keyboard-driven workflows.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-patterns-4.jsonRelated patterns you will also like
Overflow Menu
Action overflow with dropdown
Kbd Component
Keyboard key display
Outline Button
Border-style button variant
Tooltip Component
Hover explanations
Command Dialog
Keyboard command palette
Basic Button Group
Simple grouped buttons