Keyboard Key

Actions

A styled keycap that shows a keyboard shortcut.

Use the keyboard key component anywhere you need to hint at a shortcut: in menus, empty states, or inline in copy.

npx shadcn@latest add kbd

Basic

Single keys and combined shortcuts.

Preview

Live

⌘K⌘⇧PCtrlShift

tsx

1<Kbd>⌘K</Kbd>
2<Kbd>⌘⇧P</Kbd>
3<Kbd>Ctrl</Kbd>
4<Kbd>Shift</Kbd>

Keys read naturally inside a sentence.

Preview

Live

⌘K⌘⇧PCtrlShift

Press ⌘ + Shift + P to open the command palette

tsx

1<p className="text-sm text-muted-foreground">
2  Press <Kbd>⌘</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd> to open the command palette
3</p>

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
children	React.ReactNode	The key or combination to display.
className	string	Additional classes for the keycap.
title	string	Optional tooltip label shown on hover.
kbd	React.ComponentProps<'kbd'>	All native kbd attributes are forwarded.