Components

Kbd

A keyboard shortcut, rendered one cap per key. The keys prop is the only content source — Kbd takes no children.

Keys

Each entry becomes its own kbd element at a fixed 17px cap, so a two-key shortcut and a four-key shortcut sit on the same baseline.

MetaKCtrlShiftPEsc

tsx

import { Kbd } from "dowel";

<Kbd keys={["Meta", "K"]} />
<Kbd keys={["Ctrl", "Shift", "P"]} />
<Kbd keys={["Esc"]} />

Why an array

Because a string would put the separator in the caller's hands, and then half the app writes Cmd+K and the other half writes Cmd K. children is omitted from KbdProps for the same reason.

dowel does not translate key names. Meta renders as "Meta", not as a platform glyph — mapping to the right symbol per OS is application knowledge, and it needs the user agent to get right.