Build · New
Keyboard Key
Shows a key or a shortcut next to the command it runs, in menus, tooltips and help text.
Preview
Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.
Installation
SoonInstalling from the registry opens at launch. Until then the command below is what it will be.
npx shadcn@latest add @ritla/keyboard-keyUsage
import { KeyboardKey, KeyboardShortcut } from "@/components/ui/keyboard-key";<KeyboardShortcut keys={["Ctrl", "K"]} />
<KeyboardKey size="lg">Enter</KeyboardKey>Examples
API reference
KeyboardKey
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Figma's Label: the key as printed. | |
size | "sm" | "md" | "lg" | "md" | Figma's Size: 20, 24 or 32px. |
KeyboardShortcut
| Prop | Type | Default | Description |
|---|---|---|---|
keys | ReactNode[] | The keys, in order. | |
size | "sm" | "md" | "lg" | "md" | Each key's size. |
Accessibility
ARIA
- Each key is a
<kbd>, and the shortcut a<kbd>around them. Write Ctrl, not ^: screen readers read the names. - They aren't buttons; don't show them on touch-only screens.
Arabic and RTL notes
Mirrors
- The sentence around the shortcut mirrors.
Does not mirror
- The key order stays left to right inside Arabic text (Ctrl, then K).
- Numerals
- Keys as printed; digits aren't converted.
- Arabic typography
label-12Medium (label-14at lg).- Mixed-direction text
- The shortcut is isolated LTR.