Kbd

Renders a keyboard shortcut with OS-appropriate glyphs: ⌘⇧⌥ on macOS and Ctrl/Shift/Alt everywhere else.

Pass tokens ('mod', 'shift', 'K') rather than symbols, so one shortcut definition is right on both platforms. Each keycap goes down while its key is held, so a reader trying a shortcut sees it register. That is display only: Kbd never handles the shortcut.

Navigation

<script lang="ts">
	import { Kbd } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
keys	string[] | string	—	Modifiers are named, not typed: mod renders ⌘ on macOS and Ctrl elsewhere. An array, or one string joined with + ('mod+shift+p').
reactive	boolean	true	Press a keycap down while its key is held. Turn off for a shortcut shown as plain reference.
class	string	—	Merged with the component's own classes, last — so yours win.
children	Snippet	—	Raw content, when keys is not enough — a single key, styled.

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<span class="flex items-center gap-2">Search <Kbd keys={['mod', 'K']} /></span>
<span class="flex items-center gap-2">Palette <Kbd keys={['mod', 'shift', 'P']} /></span>
<span class="flex items-center gap-2">Dismiss <Kbd keys={['esc']} /></span>

Notes

Notes

• A keycap goes down while its key is held. Every Kbd on the page shares one pair of window listeners. This is display only: Kbd does not run anything. Pass reactive={false} where a moving keycap would distract, such as a long reference table.
• keys is an array or one string. keys={['mod', 'shift', 'P']} and keys="mod+shift+p" draw the same thing. The string form is the notation CommandPalette's shortcut prop takes, and what matchesShortcut(e, 'mod+shift+p') tests a keydown against, so one constant can be shown and listened for. Write the plus key as plus.
• macOS reports no keyup for a key released while ⌘ is held. The K in ⌘K therefore stays down until ⌘ is let go. That is the platform, not a stuck state.

Navigation · Tree · Tabs · Pagination · CommandPalette

---

← All components · Getting started · Theming · source