Kbd

InstallationCopy Anchor Link

npx shadcn@latest add @quireui/kbd

UsageCopy Anchor Link

<Kbd shortcut="mod+k" />   {/* ⌘ K on a Mac, Ctrl K elsewhere */}
<Kbd shortcut="g i" />     {/* G then I */}
<Kbd>Esc</Kbd>

Shortcuts use the same format as Button's shortcut and the command palette: mod is Cmd on Apple devices and Ctrl everywhere else, joined with +. Each key gets its own cap, in the order people press them. A space makes a sequence, read as "then".

LiveCopy Anchor Link

live lights each key while it is held. In a sequence, finished steps stay lit until the last one lands, or until a second passes without the next key. Use it where someone is learning a shortcut: onboarding, an empty state, a shortcuts list.

The keys sink instantly, with no animation, like everything that answers the keyboard.

SizingCopy Anchor Link

Keys are sized in em, so they follow the text around them: a sentence, a menu, a tooltip.

AccessibilityCopy Anchor Link

Keys are nested kbd elements, the HTML way to write a key combination, and are read by name; symbols like ⌘ are read as "command". A sequence is read as "G then I".

Kbd shows keys; it does not bind them. To make a shortcut work, use Button's shortcut prop or the useShortcut hook, with the same string, so what is shown and what works can never disagree.

Kbd or something else?Copy Anchor Link

• A shortcut on a button: Button's shortcut prop shows the keys quietly inside the button.
• A shortcut in a menu: DropdownMenuShortcut, plain text at the end of the item.

API referenceCopy Anchor Link