Kbd

Keyboard keys and shortcuts: one "mod+k" string shows ⌘K on a Mac and Ctrl+K elsewhere, read aloud as words. Free, MIT · Basics › Text and icons

A keyboard key or a whole shortcut. shortcut="mod+shift+k" shows ⌘⇧K on a Mac and Ctrl + Shift + K elsewhere (nested <kbd> per key, as HTML specifies for combinations), and screen readers hear "Command Shift K" instead of the symbols. It only shows keys: handle the shortcut itself in your code (CommandPalette's hotkey does).

Installation

npx valyro-cli@latest add kbd

npx shadcn@latest add https://valyro.xyz/r/kbd.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Kbd } from 'valyro-ui';

Props

Prop	Type	Default
`shortcut`	`string`		A whole combination as one string: "mod+k", "shift+enter", "mod+shift+p", or a sequence "g, i". `mod` is ⌘ on Apple platforms and Ctrl elsewhere. Without it, the children are one key: `<Kbd>Esc</Kbd>`.
`platform`	`'mac' \| 'other'`		Force the platform's key names. Default: detected after hydration (the server and the first render show `other`).
`format`	`'symbols' \| 'text'`		`symbols` ⌘⇧K, `text` Ctrl + Shift + K. Default: symbols on Mac, text elsewhere.
`size`	`'sm' \| 'md'`	`'md'`	Key height and text size.
`labels`	`Partial<KbdLabels>`		Words screen readers say for the keys of `shortcut`, and the "then" of a sequence.

Related components

Icon — Any icon on the kit’s rules: size from the text, the theme’s stroke, RTL mirroring, an accessible name; createIcon and a gallery of 111 icons
Highlight — Search hits marked in text: case and accents ignored, several terms in their own tones, ready-made ranges, the current hit
Button — Buttons in every variant
Icon Button — Icon-only button
Color Mode Switch — Light, dark or system: the choice is saved, painted before the first frame, synced across tabs and cross-faded
Button Group — Grouped buttons
Copy to Clipboard — Copy with confirmation
Badge — Status labels and tags
Tag — Removable and clickable tags, groups with +N
Avatar — User avatars
Tooltip — Hover and focus hints
Separator — Dividers

Previous: Icon · Next: Highlight · All Basics