Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Multi-Step Sequence Kbd for Ark UI

Two chords in a row, Ctrl K and then Ctrl S, each in its own group, with the word then between them.

Each chord is its own group. Ctrl K comes first and Ctrl S second, with then between them. No step is listened for.

Use two groups when both steps include a modifier. One group would look like a single chord. A Tooltip can explain it if the trigger is small. In React, Ark UI does not track the first 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.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Kbd anatomy: kbd, group

Usage

<div className="rounded-md border bg-background p-4">
  <div className="flex items-center gap-2">
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>K</Kbd>
    </KbdGroup>
    <span className="text-muted-foreground text-sm">then</span>
    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <Kbd>S</Kbd>
    </KbdGroup>
  </div>
</div>

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.

API Reference

Kbd

No extra props in this demo. The rest is on the Kbd page.

All 39 kbd examples