shadcn.io is an independent project built on shadcn/ui
Ctrl and K share a group. The word then sits between that group and a lone B. The steps are labels. The demo does not wait for keys.
Use then when a chord is followed by one key. If both steps are chords, show two groups. Put the hint on a Button only if that button runs it. In Svelte, Ark UI does not chain the keys.
Installation
Anatomy
Usage
<div class="rounded-md border bg-background p-4"><div class="flex items-center gap-2"><KbdGroup><Kbd>Ctrl</Kbd><Kbd>K</Kbd></KbdGroup><span class="text-muted-foreground text-sm">then</span><Kbd>B</Kbd></div></div>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.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
