Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Vim shortcuts often repeat keys in quick succession—gg jumps to file top, arrow shows flow better than text. This React pattern uses flex layout with Kbd components separated by muted-foreground arrow symbol (→) documenting rapid-fire sequential shortcuts common in Vim, modal editors, gaming commands. Built with shadcn/ui Kbd component and Unicode arrow separator, it's perfect for Vim documentation, modal editor tutorials, game control guides, or any interface where compact arrow notation communicates quick key repetition more clearly than verbose then text.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Key Sequence with Then
Text then separator for sequences
Vim Command Sequence
Vim command-line key sequence
Multi-Step Sequence
Multiple modifier combinations in sequence
Vim Navigation Keys
HJKL vim-style navigation
Keyboard Shortcuts
Single-step shortcut combinations
Horizontal Arrow Keys
Grouped keyboard keys
Questions you might have
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
React kbd - Multi-Step Sequence
Multi-step sequential keyboard shortcut showing Ctrl+K then Ctrl+S pattern with multiple KbdGroups and text separator built with shadcn/ui