Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React kbd - Key Sequence with Then
Sequential keyboard shortcut Kbd components showing Ctrl+K then B pattern with text separator for multi-step shortcuts built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Some shortcuts require multiple steps—press Ctrl+K, release, then press B for sequential commands. This React pattern uses flex layout with KbdGroup for first chord, text then separator, and Kbd for final key documenting sequential keyboard shortcuts common in VS Code, Emacs, Sublime. Built with shadcn/ui Kbd component and muted-foreground text separator, it's perfect for editor documentation, IDE shortcut guides, complex application shortcuts, or any interface where multi-step key sequences execute commands requiring clear step-by-step instruction.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Multi-Step Sequence
Multiple modifier combinations in sequence
Key Sequence with Arrow
Arrow separator for key sequences
Vim Command Sequence
Vim command-line key sequence
Keyboard Shortcuts
Single-step shortcut combinations
Platform-Aware Shortcut
Platform-adaptive keyboard shortcuts
Horizontal Arrow Keys
Grouped keyboard keys
Questions you might have
React kbd - Hover State
A React keyboard shortcut showing hover state with cursor-pointer and transition-colors using shadcn/ui Kbd for interactive clickable shortcuts
React kbd - Key Sequence with Arrow
Sequential keyboard shortcut Kbd components showing G → G pattern with arrow separator for rapid succession key sequences built with shadcn/ui