# Kbd · HeroUI

> Migration guide for Kbd from HeroUI v2 to v3

- Page: https://jiguang132.com/systems/heroui/docs/migration/kbd
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

> 
  Refer to the [v3 Kbd documentation](/systems/heroui/docs/components/kbd) for complete API reference, styling guide, and advanced examples. This guide only focuses on migrating from HeroUI v2.


## Structure Changes

In v2, Kbd used a `keys` prop to automatically render keyboard keys:

```tsx
import { Kbd } from "@heroui/react";

export default function App() {
  return <Kbd keys={["command"]}>K</Kbd>;
}
```

In v3, Kbd requires manual definition of keys using compound components:

```tsx
import { Kbd } from "@heroui/react";

export default function App() {
  return (
    <Kbd>
      <Kbd.Abbr keyValue="command" />
      <Kbd.Content>K</Kbd.Content>
    </Kbd>
  );
}
```

## Key Changes

### 1. Component Structure

**v2:** Single component with `keys` prop
**v3:** Compound components: `Kbd.Abbr`, `Kbd.Key`, `Kbd.Content`

### 2. Prop Changes

| v2 Prop | v3 Location | Notes |
|---------|-------------|-------|
| `keys` | - | Removed (use `Kbd.Abbr` with `keyValue`) |
| `classNames` | - | Use `className` |
| - | `Kbd` | New `variant` prop (`default` \| `light`) |
| - | `Kbd.Key` | New subcomponent for key text (alternative to `Kbd.Content`) |

## Migration Examples

### Variants


  

#### v2


    ```tsx
    <Kbd keys={["command"]}>K</Kbd>
    ```
  
  

#### v3


    ```tsx
    <Kbd variant="default">
      <Kbd.Abbr keyValue="command" />
      <Kbd.Content>K</Kbd.Content>
    </Kbd>
    <Kbd variant="light">
      <Kbd.Abbr keyValue="command" />
      <Kbd.Content>K</Kbd.Content>
    </Kbd>
    ```
  


## Kbd.Key vs Kbd.Content

v3 provides two subcomponents for key text content:

- **`Kbd.Key`**: Used for the text content of the key (e.g., a letter or number). Accepts `children` and `className` props.
- **`Kbd.Content`**: An alias/alternative for wrapping content text. Accepts `children` and `className` props.

Both can be used interchangeably for wrapping the non-modifier key text:

```tsx
{/* Using Kbd.Key */}
<Kbd>
  <Kbd.Abbr keyValue="command" />
  <Kbd.Key>K</Kbd.Key>
</Kbd>

{/* Using Kbd.Content */}
<Kbd>
  <Kbd.Abbr keyValue="command" />
  <Kbd.Content>K</Kbd.Content>
</Kbd>
```

## Component Anatomy

The v3 Kbd follows this structure:

```
Kbd (Root)
  ├── Kbd.Abbr (keyValue="command")
  ├── Kbd.Abbr (keyValue="shift") [optional, multiple]
  └── Kbd.Key or Kbd.Content [optional, for text content]
```

## Available Key Values

The `keyValue` prop accepts the same keyboard key types as v2:

**Modifier Keys:**
- `command`, `shift`, `ctrl`, `option`, `alt`, `win`

**Special Keys:**
- `enter`, `delete`, `escape`, `tab`, `space`, `capslock`, `help`

**Navigation Keys:**
- `up`, `down`, `left`, `right`, `pageup`, `pagedown`, `home`, `end`

**Function Keys:**
- `fn`

## Summary

1. **Component Structure**: Must manually define keys using `Kbd.Abbr` components
2. **keys Prop Removed**: Use `Kbd.Abbr` with `keyValue` prop instead
3. **Children Wrapping**: Wrap text content in `Kbd.Content` component
4. **ClassNames Removed**: Use `className` props on individual components
5. **New Variant Prop**: Added `variant` prop for styling (`default` \| `light`)
6. **Kbd.Key Subcomponent**: New `Kbd.Key` subcomponent available as an alternative to `Kbd.Content` for key text

---

Index of all JGuang resources: https://jiguang132.com/llms.txt