Kbd

Storybook

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. The command palette's shortcut hints render through this component.

Single keys

⌘⇧⌥⌃KEscTabEnterSpace

Chords

Compose one Kbd per key, separated by your own gap. The component deliberately renders a single keycap.

⌘K⌘⇧P⌃C

Sizes

⌘K⌘K

Compact keycaps match the command palette's shortcut hints; the default size suits body-text prose.

In prose

Press ⌘ K to open the command palette, then ↑ ↓ to move between results and Enter to run one.

tsx
// 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