shadcn.io is not affiliated with official shadcn/ui
Keyboard Hint Banner Block for React
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 Base 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.
Related
- Pro
Command Hint Banner
Top barsA one-line shortcut hint for a docs app: key caps drawn inline that read Command K on a Mac and Ctrl K everywhere else, and an underlined link to all shortcuts.
- Pro
Minimalist Text Banner
Top barsA plain policy notice for a payroll service: one centred paragraph and one underlined link between the page rails, with no tint, icon, button or dismiss.
- /Pro
Top Bar Search Banner
Utility barsA documentation search field in a slim bar: an icon, a labelled input and a slash key hint, with a popup of results that filters as you type.
- Pro
A dock pill for a workspace app: a toolbar of four icon buttons (New page, Search, Share, Notifications), each with a tooltip showing its name and its key.
- Pro
Social Links Banner
Top barsA one-line follow strip for an indie game studio: a real list of five plain links separated by dots drawn in CSS, with a quiet arrow that appears on hover and focus.
- Pro
A launch band for a design tool: a tinted strip with a centred line, a Launch week chip whose outline a light sweeps three times, and a link to the keynote.