Kbd
Keyboard shortcut display that adapts to the user's platform
Preview
CtrlKCtrl⇧PCtrlB
Usage
import { Kbd } from "@/components/ui/kbd"
{/* Shows Cmd+K on Mac, Ctrl+K on Windows/Linux */}
<Kbd keys={["mod", "K"]} />
{/* Shift shortcut */}
<Kbd keys={["mod", "shift", "P"]} />
{/* Alt shortcut */}
<Kbd keys={["alt", "N"]} />The "mod" key resolves to the Command symbol on Mac and "Ctrl" on other platforms. "shift" and "alt" also render platform-appropriate symbols. Detection happens client-side via navigator.platform.
Also exports a useIsMac() hook for use outside the component.
Install
npx shadcn add @bonsai/kbd