shadcn.io is not affiliated with official shadcn/ui
Command Hint Banner Block for React Aria
A 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.
Installation
Overview
A command hint banner for React with React Aria, the quietest way to point at a command palette. One centred line says "Press ⌘ K to jump to any file, setting or command", with the two key caps drawn inline in the line's own text size, and ends with an underlined link, "All shortcuts". The caps follow the visitor's platform: they read ⌘ on a Mac, an iPhone or an iPad, and Ctrl on every other system, swapped in once the page has loaded (the server and the poster always show ⌘). Screen readers skip the drawn caps and read the key names in words, "Command K" or "Control K". Nothing opens from the banner: it only points at the palette you already have. It sits between the page's rails under a top rule, with no tint, icon or button, follows the theme in light and dark, and wraps to two lines on a phone. For docs sites, dashboards and any app with a command palette whose shortcut people don't know yet.
FAQ
How do the key caps know the platform, and how do I see the other one?
After the first render the block reads the browser's user agent and looks for Mac, iPhone, iPad or iPod; if it finds none, the modifier cap changes from ⌘ to Ctrl. The server and the first paint always show ⌘, so there is no mismatch to repair. To see the Ctrl version, open the page in a browser on Windows or Linux, or use your developer tools' device emulation with a Windows user agent. The poster shows the Mac version because it's drawn from the server's output.
What does a screen reader hear?
The drawn caps are hidden from assistive technology, and a visually hidden "Command K" or "Control K" takes their place in the sentence, so it reads "Press Command K to jump to any file, setting or command." The words follow the same platform check as the caps.
Does the banner open the command palette?
No. The block only tells visitors that the shortcut exists; your palette listens for the keys itself. If you want a click to open it too, change the link into a button that calls your palette's open function, or point the link at a page that lists every shortcut, which is what the demo does.
How do I change the keys or the wording?
Edit HINT at the top of the file: the words before and after the caps (before, after), the letter (letter), the link's text and its destination. The two cap labels and their spoken names live in MODIFIERS. Keep the line near 60 characters with the link: it stays on one line on a desktop and two at most on a 320-pixel phone.