Kbd

Structure Changes

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

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:

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

Migration Examples

Variants

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

<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:

{/* 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