shadcn.io is not affiliated with official shadcn/ui
Keyboard Shortcut Tips Blog Block for React Aria
Five keyboard-shortcut tips in two columns: each cell draws its chord in large key caps, names the app it works in and says what it does in one line.
Installation
Overview
A quick-tips block for React with React Aria, written for Chordwick, an editor-plugin newsletter. A centred header (with a line on reading Ctrl and Alt as ⌘ and ⌥ on a Mac) sits over five tips in two columns, each in its own cell with overshooting lines. A cell is the chord itself, drawn large in key caps, with the app it works in as a tag above it and one line on what it does; the odd fifth cell spans both columns. It's built from Kbd, Badge and Guides, and it's static: nothing to press, the chord is the picture.
FAQ
How do I add a tip?
Add an entry to TIPS: an id, the app, the chord as a list of keys and one line of text. A key that is a symbol takes a spoken name ("Up arrow") so screen readers say it in words. The header's count ("Five shortcuts") derives from the array.
Why are the chords shown for Windows and Linux?
One set of keys is easier to read than two. The header says how to translate for a Mac, and the data is plain text, so a block that detects the platform can swap "Ctrl" for "⌘" before it renders.
How are the chords built?
Each key is a Kbd, joined by a plus sign that is drawing rather than text. The chord is always read left to right, even in a right-to-left page, the way a keyboard is.