Shadcn.io is not affiliated with official shadcn/ui
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
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.
Key Sequence with Then preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Hover State
A React keyboard shortcut showing hover state with cursor-pointer and transition-colors using shadcn/ui Kbd for interactive clickable shortcuts
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