Skip to content
shadcn.io

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.

Framework
UI library

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

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.

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.

Are sequence shortcuts accessible?

They can be easier than three-key chords, since you only hold two keys at a time. Make sure every command also works from a menu, and avoid short timeouts.

How do Vim and VS Code sequences differ?

Vim sequences are plain keys typed in normal mode, like gg. VS Code calls them chords and starts them with a modifier, like Ctrl K Ctrl S, so they work while you're typing.