shadcn.io is not affiliated with official shadcn/ui
Kbd examples · Sequence
Multi-Step Sequence Kbd for React
Two chords in a row, Ctrl K then Ctrl S, each in its own key group.
Some sequences need a modifier on both steps: in VS Code, Ctrl K then Ctrl S opens the keyboard shortcuts. This React example puts each chord in its own KbdGroup with the word then between them, so it reads as two chords, not four keys at once.
Preview
Installation
FAQ
When should both steps use a modifier?
When people may be typing in a text field: a second step without a modifier would type a letter there. Code editors use modifiers on both steps for that reason.
Should the second chord use the same modifier as the first?
Usually, yes. Ctrl K then Ctrl S lets people keep Ctrl held through both steps, which is faster and easier to remember.
How do apps show the first chord was received?
With a short message, often in a status bar, saying the first chord was pressed and the app is waiting for the second key. Without it, people can't tell whether anything happened.
How do people learn multi-step shortcuts?
From menus and the command palette, where the shortcut is shown next to each command, and from a shortcuts page grouped by prefix. Showing the possible second keys after the first chord helps too.
Related
- Key Sequence with Then KbdA Ctrl K chord, the word then, and a B
- 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