Kbd

A key, drawn as a key.

Default

Single keys and a grouped shortcut.

Open the palette with ⌘K

Undo with CtrlZ

For naming a shortcut inside a sentence. Group the keys of one shortcut together: the group is what tells a screen reader that ⌘ and K are one thing rather than two.

Installation

npx philcn@latest add kbd

The file is written into your project. It is yours from then on — change it as you like.

Props

None of its own. Everything you pass goes straight to the underlying <kbd>, className included.

Worth knowing

Write the key the way the reader's keyboard writes it: ⌘ on a Mac, Ctrl elsewhere.