Skip to content

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

Free

Complex Shortcut Kbd for Ark UI

Ctrl, Shift, and P in one group, a three-key chord shown as labels. The demo does not listen for the keys.

Three caps, Ctrl, Shift, and P, share one group so they read as a single chord. Modifiers come first. Nothing is bound.

Add a third key when two-key chords are taken, and keep that order everywhere. A Dropdown Menu item can carry the hint. In React, Ark UI does not register Ctrl Shift P.

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">
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>Shift</Kbd>
    <Kbd>P</Kbd>
  </KbdGroup>
</div>

FAQ

When should I use a three-key shortcut?

For commands that are used often enough to need a shortcut but not as often as copy or save, and for variants of a two-key shortcut: Ctrl Shift Z to redo next to Ctrl Z to undo. Keep the most frequent commands on two keys.

In what order should modifiers be shown?

Follow the platform: macOS lists ⌃ Control, ⌥ Option, ⇧ Shift, ⌘ Command, in that order, and Windows puts Ctrl first, as in Ctrl Shift P. Then the main key last.

How do I detect Ctrl Shift P?

In a keydown listener, check event.ctrlKey (or event.metaKey on Mac) and event.shiftKey, and compare the key. With Shift held, event.key may be an uppercase P, so compare it case-insensitively or use event.code, which is KeyP.

Are three-key shortcuts comfortable to press?

Two modifiers on the left plus a letter is manageable for one hand when the letter is near them. Shortcuts that stretch to the far side of the keyboard are hard to press and harder for people with limited mobility.

What are the alternatives to three-key shortcuts?

A command palette, where people type the command's name, or a sequence like Ctrl K then B, which uses two easy presses instead of one hard one. The Key Sequence with Then example shows how to display it.

How do I make three-key shortcuts accessible?

Make every command reachable without the shortcut, from a menu or a palette. Operating systems offer sticky keys for people who can't hold several keys, and letting people remap shortcuts helps too.

API Reference

Kbd

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

All 39 kbd examples