# Kbd

Inline keyboard key caps for shortcut hints in docs, menus, and empty states.

## Examples

### Default

A single shortcut rendered as adjacent key caps.

```tsx
import { Kbd } from '@var-ui/react';

<span>
  Press <Kbd>⌘</Kbd> <Kbd>K</Kbd>
</span>
```

```astro
---
import { Kbd } from '@var-ui/astro';
---
<span>Press <Kbd>⌘</Kbd> <Kbd>K</Kbd></span>
```

```html
<span>Press <kbd class="var-ui-kbd">⌘</kbd> <kbd class="var-ui-kbd">K</kbd></span>
```

### Key combo

Compose several `Kbd`s in sequence for multi-key shortcuts (⌘K, ⌘S).

```tsx
import { Kbd } from '@var-ui/react';

<span>
  Open the palette with <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>, then save with <Kbd>⌘</Kbd>
  <Kbd>S</Kbd>
</span>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |

## Accessibility

`Kbd` renders a semantic `<kbd>`. Keep surrounding copy so the shortcut is understandable without relying on the glyph alone (for example “Press ⌘ K to open”).