shadcn.io is not affiliated with official shadcn/ui
Kbd examples · Sequence
Key Sequence with Then Kbd for React
A Ctrl K chord, the word then, and a B key for a two-step shortcut.
Editors run out of single shortcuts and start chaining them: press Ctrl K, let go, then press B. This React example shows the first chord in a KbdGroup, the word then in small muted text, and the second key as its own Kbd, so the two steps can't be mistaken for one chord.
Preview
Installation
FAQ
When should a shortcut be a sequence instead of a chord?
When the simple chords are taken, or to group related commands under one prefix: Ctrl K starts many commands in code editors. Keep the most used commands as single chords.
Should I use then or an arrow between steps?
Then is clearest and easy to translate; an arrow is shorter. The Key Sequence with Arrow example shows the arrow version.
How long can people wait between the steps?
It depends on the app: some cancel the sequence after about a second, code editors usually wait until the next key. If yours has a timeout, keep it generous and show that the first step was received.
How do people find sequence shortcuts?
Show them next to the commands in menus and the command palette, and list them on a shortcuts page. After the first step, a small hint listing the possible next keys helps too.
Related
- Multi-Step Sequence KbdTwo chords in a row, Ctrl K then Ctrl S
- Key Sequence with Arrow KbdA G then G key sequence with an arrow
- Vim Command Sequence KbdThe colon, W and Q keys in a row for
- Command Palette Shortcut KbdThe ⌘K shortcut that opens a command
- Platform-Aware Shortcut KbdA shortcut that reads ⌘K on Apple devices
- Arrow Keys Cross Pattern KbdFour arrow keys in the inverted T of a