# Kbd and KbdGroup

> Keyboard keys as small raised key caps, alone or as a combination.

Category: Data display. Docs page: https://rime.mjsons.net/components/kbd

## Installation

```bash
npx shadcn@latest add KezLahd/rime/kbd
```

Kbd renders one key as a real <kbd>: a light fill, a hairline edge and a darker bottom lip so it reads as a key, not a badge. KbdGroup renders a chord (Ctrl + K) as a <kbd> wrapping one <kbd> per key, which is how HTML marks up a combination.

Use them in help text, menus, tooltips and command palettes. size="sm" fits inside a menu row or running text.

## Usage

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

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

## Props: Kbd

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "md"` | `"md"` | sm sits inside menus and tooltips; md in running text. |

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes.

## Props: KbdGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` (required) | `ReadonlyArray<string>` |  | The keys pressed together, in order: ["Ctrl", "K"]. |
| `separator` | `ReactNode` | `"+"` | Between the keys. Defaults to a muted "+". |
| `size` | `"sm" \| "md"` | `"md"` |  |
| `className` | `string` |  |  |

## Examples

### Keys and combinations

```tsx
<KbdGroup keys={["Ctrl", "K"]} />
<KbdGroup keys={["Shift", "Alt", "N"]} />
<Kbd>Esc</Kbd>
<p>Press <KbdGroup keys={["Ctrl", "S"]} size="sm" /> to save the invoice.</p>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--kbd-bg` | `rgba(var(--rgb-white), 0.8)` |
| `--kbd-ink` | `var(--ink-secondary)` |
| `--kbd-radius` | `var(--r-2xs)` |

System tokens it reads: `--border-w`, `--font-body`, `--ink-muted`, `--ink-secondary`, `--line`, `--r-2xs`, `--rgb-brand-deep`, `--rgb-contact`, `--rgb-white`, `--text-caption`, `--text-micro`.

## Accessibility

- Real <kbd> elements, so the keys are read as text; the separator is hidden from assistive tech.

## Do

- Name keys as they are printed: Ctrl, Shift, Enter, Esc.

## Don't

- Don't use Kbd for anything that is not a key; that is a Badge.

Related: https://rime.mjsons.net/components/tooltip, https://rime.mjsons.net/components/command