Kbd

Overview

The Kbd component in HeroUI v3 has been redesigned with a compound component pattern, requiring explicit structure with Kbd.Abbr and Kbd.Content components.

Structure Changes

v2: Keys Prop

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

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

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

v3: Compound Components

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

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

<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.Content

2. Prop Changes

3. Removed Props

The following props are no longer available in v3:

• keys - Use Kbd.Abbr components with keyValue prop instead
• classNames - Use className props on individual components

Migration Examples

Basic Usage

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

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

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

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

Multiple Keys

<Kbd keys={["command", "shift"]}>N</Kbd>

<Kbd>
  <Kbd.Abbr keyValue="command" />
  <Kbd.Abbr keyValue="shift" />
  <Kbd.Content>N</Kbd.Content>
</Kbd>

Key Only (No Content)

<Kbd keys={["enter"]} />

<Kbd>
  <Kbd.Abbr keyValue="enter" />
</Kbd>

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>

Custom Styling

<Kbd
  keys={["command"]}
  classNames={{
    base: "custom-base",
    abbr: "custom-abbr",
    content: "custom-content"
  }}
>
  K
</Kbd>

<Kbd className="custom-base">
  <Kbd.Abbr keyValue="command" className="custom-abbr" />
  <Kbd.Content className="custom-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.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

Breaking Changes 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)

Tips for Migration

1. Replace keys prop: Convert keys={["command"]} to <Kbd.Abbr keyValue="command" />
2. Multiple keys: Add multiple Kbd.Abbr components for key combinations
3. Wrap content: Wrap text children in Kbd.Content component
4. Key-only display: Omit Kbd.Content if only displaying keys
5. Custom styling: Apply className props directly to Kbd, Kbd.Abbr, and Kbd.Content
6. Use variants: Apply variant="light" for a lighter appearance

Need Help?

For v3 Kbd features and API:

• See the API Reference
• Check interactive examples

For community support:

• GitHub Discussions
• Discord community