shadcn.io is an independent project built on shadcn/ui
Two G caps sit in a row with a muted arrow between them. They are not in a group, so they do not look like keys held together. Nothing listens for G.
Use the arrow when order is the whole point. A chord belongs in a group on Kbd. In React, Ark UI does not time the two presses.
Installation
Anatomy
Usage
<div className="rounded-md border bg-background p-4">
<div className="flex items-center gap-2">
<Kbd>G</Kbd>
<span className="text-muted-foreground">→</span>
<Kbd>G</Kbd>
</div>
</div>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.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
