shadcn.io is not affiliated with official shadcn/ui
Keyboard Hint Banner Block for Radix UI
A one-line shortcut hint for a text editor, aligned to the start: three shortcuts read as a sentence, each a key cap and its verb, and a link to the full list.
Installation
Overview
A keyboard hint banner for React with Radix UI: a line that teaches three shortcuts without a dialog. It starts with "Skip the mouse:" and then reads as a sentence, each shortcut a key cap and its verb: / Search, ? Help and G then D Drafts, where the two-key shortcut shows the word "then" between its caps. An underlined "Full list" link ends the line. It's aligned to the start of the page column rather than centred, so it reads like a line of the editor's own footer, and it sits between the rails under a top rule with no tint, icon or button. The three shortcuts are a real list, so a screen reader announces "list, 3 items", and the caps are plain text inside it. It follows the theme in light and dark, is 44 pixels tall on a desktop and wraps to two lines on a phone. For editors, dashboards and any tool whose fastest paths are on the keyboard.
FAQ
How do I change the shortcuts?
Edit SHORTCUTS at the top of the file: each entry is an action (the verb) and its keys, in press order. One key draws one cap; two or more draw a cap each with "then" between them (the word is HINT.between). Three entries fill a desktop line and wrap to two lines on a 320-pixel phone; a fourth would make a third line there.
Does the banner bind the keys?
No. It is only the hint. Your app listens for the keys; the caps and verbs here must match what it does. Remember that single-letter shortcuts need a way to turn them off or remap them (WCAG 2.1.4), and that they should ignore key presses inside text fields.
Why is it a list?
Three shortcuts in a row are three items. Marking them up as a list lets a screen reader say how many there are, and lets a visitor skip past them. Each item shows its caps first and its verb after, so the order of the sentence is the order in the markup.
How is it different from the Command Hint Banner?
The Command Hint Banner points at one palette shortcut, is centred, and swaps ⌘ for Ctrl by platform. This one lists three single-key shortcuts, is aligned to the start, and doesn't depend on the platform. Use that one for a palette and this one for an app with its own key map.