shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI does not register Ctrl Shift P.
Installation
Anatomy
Usage
<div class="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.
API Reference
Kbd
No extra props in this demo. The rest is on the Kbd page.
