shadcn.io is not affiliated with official shadcn/ui
Practice Keyboard Shortcuts Onboarding Block for Solid
A code review tool's shortcut sheet you can practise on: a table of six shortcuts that tick off as you press them while focus is inside the panel, a chord with a waiting state, and a Command or Ctrl switch.
Installation
Overview
Teach the shortcuts by letting people press them, with this practice panel for Solid with Ark UI. It is a setup panel of Diffwick, a code review tool: a framed table of six shortcuts, each with its keys in Kbd and a word for whether you have tried it, a count (“2 of 6 tried”) with a hairline of progress, and a practice box at the foot. While focus is anywhere inside the panel, pressing a shortcut ticks its row and says so; Go to your inbox is a chord, G then I, so G waits for a moment. Command shows first on a Mac and Ctrl elsewhere, decided after the page loads, and a Switch at the top overrides it. On a phone each row becomes a short list with the keys under the action. There is no Shine Button: the practice is the whole point.
FAQ
Where does it listen for keys?
Only inside the panel. A capture listener on the panel's own element hears keys pressed while focus is in it (a button can't swallow one), and nothing is bound to the page, so the shortcuts never fight the rest of your site. The practice box takes focus on a click or a Tab; the box says so, and it also says that keys outside the panel are ignored.
Which shortcuts are used, and why those?
J, K, C, slash, G then I, and Command or Ctrl with Enter: keys the browser doesn't reserve. Command or Ctrl plus S, N, T or W would be taken by the browser before the page saw them, so they are left out. Edit SHORTCUTS for your own list; a chord is a shortcut with two steps, and a step can ask for Command or Ctrl with mod.
How does the chord work?
The first key (G) moves the row to “Waiting” and says what to press next. The second key (I) completes it. Any other key goes back to being a first key, and if nothing follows within a second and a half, the wait ends and the status says so. The timer is cleared when the panel unmounts.
How do Command and Ctrl get chosen?
The panel renders Command first so the server and the browser agree, then after it loads switches to Ctrl on any system that isn't a Mac or an iPhone. The switch overrides that either way, and a shortcut counts only with the modifier that is showing.
What stays local in the demo, and how do I wire it?
The ticks live in the panel's state and nothing is saved, sent or bound for real: the shortcuts do nothing in the demo but tick. In your app bind the same combinations where they act (the review page) and remember which ones a person has tried if you want the count to persist.