labsUI

Kbd

Server-safe key caps for shortcut hints. KbdGroup nests keys per the HTML spec.

npx @kznlabs/labsui add kbd
  • Search⌘K
  • Toggle sidebar⌘B
  • Command palette⇧⌘P
  • Close dialogEsc
import { Kbd, KbdGroup } from "@/components/ui/kbd";export function ShortcutHint() {  return (    <p>      Press <KbdGroup keys={["⌘", "K"]} /> to search, <Kbd>Esc</Kbd> to close.    </p>  );}

<Kbd>

One key cap, e.g. <Kbd>⌘</Kbd>.

Also accepts every <kbd> prop (none of its own).

<KbdGroup>

A shortcut made of several keys: <KbdGroup keys={["⌘", "K"]} />. Nested <kbd>s, per the HTML spec.

  • keys*
    readonly string[]

    One <kbd> per key, e.g. ["⇧", "⌘", "P"].

PropTypeDefault
keys*

One <kbd> per key, e.g. ["⇧", "⌘", "P"].

readonly string[]—

Also accepts every <kbd> prop.

* required. Every component also takes className.