A keyboard key as a keycap
Renders a semantic kbd element styled as a keycap, for shortcut hints in menus and documentation prose. Compose several for a chord, or pass a whole shortcut as keys and it draws the keys for the reader's platform. The command palette's shortcut hints render through this component.
Single keys
Chords
Compose one Kbd per key, separated by your own gap. The component deliberately renders a single keycap.
Sizes
Compact keycaps match the command palette's shortcut hints; the default size suits body-text prose.
A whole shortcut
keys takes the same string useShortcut binds: mod draws ⌘ on a Mac and Ctrl elsewhere, and a space separates the steps of a sequence. The keys keep their left-to-right order in a right-to-left page, and keyLabels renames any of them for a keyboard printed in another language.
In prose
Press ⌘ K to open the command palette, then ↑ ↓ to move between results and Enter to run one.
// From the npm package
import { Kbd } from 'rift-ds/components/Kbd/Kbd';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/kbd.json