# Kbd

> Keyboard keys and shortcut chords.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/kbd.json`

## Install

```tsx
import { Kbd, KbdGroup } from "@aspyn-io/kit";
```

### Single key

```tsx
<Kbd>Esc</Kbd>
```

### Key chord

Group keys with KbdGroup to describe a shortcut like ⌘K or Ctrl+Shift+P.

```tsx
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>
```

### Inline in text

```tsx
<div className="text-sm text-muted-foreground">
  Press <Kbd>/</Kbd> to search, or <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup> for the palette.
</div>
```

## Notes

- Renders a semantic <kbd> element and inherits type styles, so it sits naturally inside prose, buttons, and menu rows.
- For a command palette, pair with Command / CommandDialog; for menu row hints, CommandShortcut and *MenuShortcut are the lighter-weight text style.