# Kbd

- Page: <https://kznlabs.github.io/labsUI/components/kbd>

## Kbd (`kbd`, component)

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

- Install: `npx @kznlabs/labsui add kbd`
- Docs: <https://kznlabs.github.io/labsUI/components/kbd>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Kbd>` (+ <kbd> props): One key cap, e.g. `<Kbd>⌘</Kbd>`.
- `<KbdGroup>` (+ <kbd> props): 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"].

### Usage

```tsx
<KbdGroup keys={["⌘", "K"]} />
```

### Example: shortcut-hint.tsx

```tsx
import { Kbd, KbdGroup } from "@/components/ui/kbd";

export function ShortcutHint() {
  return (
    <p>
      Press <KbdGroup keys={["⌘", "K"]} /> to search, <Kbd>Esc</Kbd> to close.
    </p>
  );
}
```