A square, centered keyboard "key" chip for rendering keyboard shortcut hints. Designed so every key—letters and modifiers—shares the same visual height/width and baseline.
1import { Kbd } from "@ngrok/mantle/kbd";2 3<div className="flex items-center gap-2">4 <Kbd>K</Kbd>5 <Kbd>⌘</Kbd>6 <Kbd>⌃</Kbd>7 <Kbd>⇧</Kbd>8 <Kbd>⌥</Kbd>9</div>;Combine multiple Kbd components to display keyboard shortcuts.
1import { Kbd } from "@ngrok/mantle/kbd";2 3<div className="flex items-center gap-2">4 <Kbd>⌘</Kbd>5 <span>+</span>6 <Kbd>K</Kbd>7</div>;When displaying modifier symbols (⌘/⌃/⇧/⌥), provide an accessible name via aria-label for screen reader users.
1import { Kbd } from "@ngrok/mantle/kbd";2 3<div className="flex items-center gap-2">4 <Kbd aria-label="Command">⌘</Kbd>5 <span>+</span>6 <Kbd>K</Kbd>7</div>;The Kbd accepts the following props in addition to the standard HTML kbd attributes.