shadcn.io is not affiliated with official shadcn/ui
Kbd examples · Sequence
Key Sequence with Arrow Kbd for React
A G then G key sequence with an arrow between the two presses.
Some shortcuts are two presses in a row rather than keys held together, like G G, which jumps to the top in Vim and in many keyboard-driven web apps. This React example puts a muted → between two G caps in a flex row, so the order reads at a glance. Because the caps aren't in a KbdGroup, they don't look like a chord.
Preview
Installation
FAQ
When should I use an arrow instead of the word then?
An arrow is compact, good for short sequences and tight spaces like menus. The word then is clearer for people who don't know sequence shortcuts, and it translates; the Key Sequence with Then example uses it.
Which arrow works between keys?
→ (U+2192), as here, is the most common. Avoid arrows that look like keys, such as ⇥ for Tab, which would read as part of the shortcut.
Why do shortcuts repeat a key, like G G?
Vim made double keys a pattern: gg jumps to the first line, dd deletes a line, yy copies one. A repeated key is quick to press and hard to hit by accident.
How much space should be around the arrow?
More than inside a chord: here gap-2 around the arrow, against the gap-1 a KbdGroup uses. The extra space shows the keys are pressed one after the other.
Related
- Key Sequence with Then KbdA Ctrl K chord, the word then, and a B
- Vim Command Sequence KbdThe colon, W and Q keys in a row for
- Multi-Step Sequence KbdTwo chords in a row, Ctrl K then Ctrl S
- Vim Navigation Keys KbdThe H, J, K and L keys in one row, the
- Arrow Keys Cross Pattern KbdFour arrow keys in the inverted T of a
- Arrow Keys Horizontal KbdLeft and right arrow keys grouped side by