# Kbd
**Category**: react
**URL**: https://www.heroui.com/docs/react/migration/kbd
**Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/kbd.mdx
> Migration guide for Kbd from HeroUI v2 to v3
***
Refer to the [v3 Kbd documentation](/docs/react/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 K;
}
```
In v3, Kbd requires manual definition of keys using compound components:
```tsx
import { Kbd } from "@heroui/react";
export default function App() {
return (
K
);
}
```
## 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
```tsx
K
```
```tsx
K
K
```
## 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 */}
K
{/* Using Kbd.Content */}
K
```
## 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