Kbd Shortcut Badge

A keyboard shortcut badge with real keycaps for command palettes and developer tools.

⌘Kto search

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Badge22 } from "@/components/beste/component/badge22";

<Badge22 keys={["⌘", "K"]} label="to search" />

<Badge22
  keys={["Ctrl", "Shift", "P"]}
  label="opens the palette"
  tone="outline"   // "muted" (default) | "outline"
/>