Skip to content
shadcn.io

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.

Framework
UI library

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

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 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.

What happens if someone is too slow?

Code editors usually wait for the next key without a timeout. If your app has one, cancel quietly, clear the status message and let the next key do what it normally does.

Are multi-step sequences accessible?

They demand memory and precise timing, so treat them as shortcuts for power users. Every command they run must also be in a menu or the command palette.