shadcn.io is not affiliated with official shadcn/ui
Keyboard Shortcuts Sidebar Block for Radix UI
A keyboard-first task app in a fixed-height window whose sidebar rows show their keys and obey them: G then a letter, or Ctrl and 1 to 5, go to a view, with a Go to chip and a question mark cheatsheet.
Installation
Overview
Drive a sidebar from the keyboard with this keyboard shortcuts sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar for Chordbench, a task app, with five views and three projects, the views showing their keys as Kbd caps. While focus is inside the window, G then I, T, U, A or D goes to Inbox, Today, Upcoming, Anytime or Done, and Ctrl (Command on Apple devices) with 1 to 5 goes to the same five. A chip in the top bar names the jump for a moment, the status line says it, and Escape drops a pending G. A question mark opens a Popover cheatsheet of every key. The keys are skipped in text fields. The page lists the chosen view's tasks, or a project's across every view. Folded to icons, the tooltips name each view's keys. It's built from Sidebar, Kbd, Popover, Button, Avatar and Guides, with a CSS entrance only. For task managers, inboxes and any app whose users live on the keyboard.
FAQ
How does G then a letter work?
Pressing G arms the chord for one and a half seconds and says so in the status line; the next letter picks the view. Any other key cancels it with a short message, Escape cancels it too, and the timer clears if you wait. The letters are I, T, U, A and D, the first letters of the five views.
Where do the keys work?
Only while focus is inside the window. A capture listener on the window's own element hears them, so a button cannot swallow them and nothing outside the window is affected. They are skipped when focus is in a text field or an editor, so typing a g never jumps. The provider's own sidebar shortcut is off.
How are the caps chosen, and can the browser block them?
The caps read ⌘ on Apple devices and Ctrl elsewhere, swapped in after the page loads. Some browsers reserve a few key combinations for themselves and never pass them to a page; if yours keeps Ctrl with a digit for switching tabs, the G chords still work, and so do the links.
What does the question mark open?
A non-modal popover listing the seven shortcuts as a description list, opened by the Shortcuts button or by pressing ? with focus in the window. Escape closes it and returns focus to the button. The list is plain text, so a screen reader reads it as it reads any list.
What stays in the page, and how do I connect it?
Everything. The views, projects and tasks are typed in the file, and the keys only change which list shows. In your app, make each key call your router. The rows are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with asChild around an a element.