shadcn.io is not affiliated with official shadcn/ui
Keyboard Shortcuts Carousel Block for React
Six sections of a notes editor's keyboard shortcuts, one per slide with chords in key caps, and a search field that jumps to the first section with a match and marks the matching rows.
Installation
Overview
Teach a keyboard without a wall of keys, with this keyboard shortcuts carousel for React with Base UI. Quillkey, a notes editor, groups its keys into Navigation, Editing, Selection, View, Tools and Help, six actions each, one section per slide, every chord drawn in Kbd caps. A search field above the track jumps to the first section with a match as you type and marks the matching rows; Enter moves on to the next section with a match, and the foot says "3 matches, 2 in Editing". The modifier keys read Cmd and Option on a Mac and Ctrl and Alt elsewhere, decided after mount. The shortcuts are data and none is bound. The product and its keys are made up.
FAQ
How do I use my own shortcuts?
Edit SECTIONS. A chord is a list of keys; "mod" and "alt" are written per platform, anything else is shown as written.
How does it work with a keyboard?
Tab reaches the controls in the open slide, the dots, Previous and Next. With focus inside the track, the arrow keys move between slides (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Slides out of view are hidden from the tab order and from screen readers.
How does the search work?
It matches the action's words and the key words (ctrl, cmd, shift, option), ignores case, jumps to the first section with a match as you type and moves to the next with Enter. The track does not filter, so its height never changes.