Kbd

Name: Kbd
Author: reaviz

ASecurity

Displays keyboard shortcuts with platform-aware modifier key symbols. Splits key combinations by `+` and renders each key as a styled Chip inside a `<kbd>` element.

4 stars
0 votes
0 copies
2 views
Added May 27, 2026

data-aitypescript

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill kbd --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Kbd?

Add the live security badge to your README. It updates with every re-scan.

[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-kbd/badge)](https://www.skillsdirectory.com/skills/reaviz-kbd)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro

SKILL.md

# Kbd

Displays keyboard shortcuts with platform-aware modifier key symbols. Splits key combinations by `+` and renders each key as a styled Chip inside a `<kbd>` element.

## Import

```tsx
import { Kbd } from 'reablocks';
```

## Kbd Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `keycode` | `string` | — | Keyboard shortcut string (e.g. `"mod+shift+k"`) |
| `theme` | `KbdTheme` | — | Per-instance theme override |

Also inherits Chip props (except `children` and `theme`): `size`, `color`, `variant`, etc.

## Basic Usage

```tsx
<Kbd keycode="mod+shift+k" />
```

Renders as: `⌘` `⇧` `k` (on Mac) or `CTRL` `⇧` `k` (on Windows/Linux)

## Key Transformations

The `getHotkeyText` utility performs these string replacements (keys are **not** auto-uppercased):

| Input | Mac Output | Windows/Linux Output |
|-------|------------|---------------------|
| `mod`, `modifier`, `meta` | `⌘` | `CTRL` |
| `shift` | `⇧` | `⇧` |
| `plus` | `+` | `+` |
| `minus` | `-` | `-` |
| Other keys | As-is | As-is |

## Examples

```tsx
<Kbd keycode="mod+c" />         {/* ⌘ c  or  CTRL c */}
<Kbd keycode="mod+shift+p" />   {/* ⌘ ⇧ p  or  CTRL ⇧ p */}
<Kbd keycode="mod+plus" />      {/* ⌘ +  or  CTRL + */}
```

## KbdTheme Interface

```typescript
interface KbdTheme {
  base: string;   // Container (inline-flex, gap, alignment)
  chip: string;   // Individual key chip (font-mono, rounded)
}
```