KBD

KBD is a component to display which key or combination of keys performs a given action.

Installation

npx shadcn add https://hq-ui.vercel.app/r/nova/kbd

Examples

KBD Group

kbd-group-demo

Use Ctrl + BCtrl + K to open the command palette

KBD in Button

kbd-button-demo

KBD in Dropdown Menu

kbd-dropdown-menu-demo

KBD in Input Group

kbd-input-group-demo
⌘K

KBD in Tooltip

kbd-tooltip-demo

Keys

KeySymbolName
ctrl^Control
mod⌘Command/Control
win⌘Win
meta⌘Meta
alt⌥Option/Alt
shift⇧Shift
space␣Space
tab⇥Tab
delete⌫Delete
capslock⇪Caps Lock
up↑Up
right→Right
down↓Down
left←Left
pageup⇞Page Up
pagedown⇞Page Down
home↖Home
end↘End
enter↵Enter
esc⎋Escape
fnFnFunction