Kbd | HeroUI v3 (Previously NextUI) - The design system you don't have to build

Import

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

Usage

⌘K⇧P⌃C⌥D

"use client";

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

export function Basic() {
  return (
    <div className="flex items-center gap-4">
      <Kbd.Root>
        <Kbd.Abbr keyValue="command" />
        <Kbd.Content>K</Kbd.Content>
      </Kbd.Root>
      <Kbd.Root>
        <Kbd.Abbr keyValue="shift" />
        <Kbd.Content>P</Kbd.Content>
      </Kbd.Root>
      <Kbd.Root>
        <Kbd.Abbr keyValue="ctrl" />
        <Kbd.Content>C</Kbd.Content>
      </Kbd.Root>
      <Kbd.Root>
        <Kbd.Abbr keyValue="option" />
        <Kbd.Content>D</Kbd.Content>
      </Kbd.Root>
    </div>
  );
}

Anatomy

Import the Kbd component and access all parts using dot notation.

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

export default () => (
  <Kbd.Root>
    <Kbd.Abbr title="Command">⌘</Kbd.Abbr>
    <Kbd.Content>K</Kbd.Content>
  </Kbd.Root>
);

Arrow Keys:

↑↓←→

Page Navigation:

⇞⇟↖↘

"use client";

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

export function NavigationKeys() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <span className="text-muted text-sm">Arrow Keys:</span>
        <div className="flex items-center gap-2">
          <Kbd.Root>
            <Kbd.Abbr keyValue="up" />
          </Kbd.Root>
          <Kbd.Root>
            <Kbd.Abbr keyValue="down" />
          </Kbd.Root>
          <Kbd.Root>
            <Kbd.Abbr keyValue="left" />
          </Kbd.Root>
          <Kbd.Root>
            <Kbd.Abbr keyValue="right" />
          </Kbd.Root>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-muted text-sm">Page Navigation:</span>
        <div className="flex items-center gap-2">
          <Kbd.Root>
            <Kbd.Abbr keyValue="pageup" />
          </Kbd.Root>
          <Kbd.Root>
            <Kbd.Abbr keyValue="pagedown" />
          </Kbd.Root>
          <Kbd.Root>
            <Kbd.Abbr keyValue="home" />
          </Kbd.Root>
          <Kbd.Root>
            <Kbd.Abbr keyValue="end" />
          </Kbd.Root>
        </div>
      </div>
    </div>
  );
}

Inline Usage

Press Esc to close the dialog.

Use ⌘K to open the command palette.

Navigate with ↑ and ↓ arrow keys.

Save your work with ⌘S regularly.

"use client";

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

export function InlineUsage() {
  return (
    <div className="space-y-4">
      <p className="text-sm">
        Press{" "}
        <Kbd.Root>
          <Kbd.Content>Esc</Kbd.Content>
        </Kbd.Root>{" "}
        to close the dialog.
      </p>
      <p className="text-sm">
        Use{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>K</Kbd.Content>
        </Kbd.Root>{" "}
        to open the command palette.
      </p>
      <p className="text-sm">
        Navigate with{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="up" />
        </Kbd.Root>{" "}
        and{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="down" />
        </Kbd.Root>{" "}
        arrow keys.
      </p>
      <p className="text-sm">
        Save your work with{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="command" />
          <Kbd.Content>S</Kbd.Content>
        </Kbd.Root>{" "}
        regularly.
      </p>
    </div>
  );
}

Instructional Text

Quick Actions

• Open search: ⌘K
• Toggle sidebar: ⌘B
• New file: ⌘N
• Quick save: ⌘S

"use client";

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

export function InstructionalText() {
  return (
    <div className="space-y-3">
      <div className="bg-surface-2 rounded-lg p-4">
        <h4 className="mb-2 text-sm font-semibold">Quick Actions</h4>
        <ul className="space-y-2 text-sm">
          <li>
            • Open search:{" "}
            <Kbd.Root>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>K</Kbd.Content>
            </Kbd.Root>
          </li>
          <li>
            • Toggle sidebar:{" "}
            <Kbd.Root>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>B</Kbd.Content>
            </Kbd.Root>
          </li>
          <li>
            • New file:{" "}
            <Kbd.Root>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>N</Kbd.Content>
            </Kbd.Root>
          </li>
          <li>
            • Quick save:{" "}
            <Kbd.Root>
              <Kbd.Abbr keyValue="command" />
              <Kbd.Content>S</Kbd.Content>
            </Kbd.Root>
          </li>
        </ul>
      </div>
    </div>
  );
}

Special Keys

Press ↵ to confirm or ⎋ to cancel.

Use ⇥ to navigate between form fields and ⇧⇥ to go back.

Hold ␣ to temporarily enable panning mode.

"use client";

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

export function SpecialKeys() {
  return (
    <div className="space-y-3">
      <p className="text-sm">
        Press{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="enter" />
        </Kbd.Root>{" "}
        to confirm or{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="escape" />
        </Kbd.Root>{" "}
        to cancel.
      </p>
      <p className="text-sm">
        Use{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="tab" />
        </Kbd.Root>{" "}
        to navigate between form fields and{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="shift" />
          <Kbd.Abbr keyValue="tab" />
        </Kbd.Root>{" "}
        to go back.
      </p>
      <p className="text-sm">
        Hold{" "}
        <Kbd.Root>
          <Kbd.Abbr keyValue="space" />
        </Kbd.Root>{" "}
        to temporarily enable panning mode.
      </p>
    </div>
  );
}

Styling

Passing Tailwind CSS classes

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

function CustomKbd() {
  return (
    <Kbd.Root className="bg-gray-100 dark:bg-gray-800">
      <Kbd.Content>K</Kbd.Content>
    </Kbd.Root>
  );
}

Customizing the component classes

To customize the Kbd component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .kbd {
    @apply bg-gray-100 dark:bg-gray-800 border-gray-300;
  }

  .kbd__abbr {
    @apply font-bold;
  }

  .kbd__content {
    @apply text-sm;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Kbd component uses these CSS classes (View source styles):

Base Classes

.kbd - Base keyboard key styles with background, border, and spacing
.kbd__abbr - Abbreviation element for modifier keys
.kbd__content - Content wrapper for key text

API Reference

Kbd.Root Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content of the key
`className`	`string`	-	Custom CSS classes

Kbd.Abbr Props

Prop	Type	Default	Description
`title`	`string`	-	Title attribute for accessibility (e.g., "Command" for ⌘)
`children`	`React.ReactNode`	-	The symbol or text to display (e.g., ⌘, ⌥, ⇧)
`className`	`string`	-	Custom CSS classes

Kbd.Key Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Text content of the key
`className`	`string`	-	Custom CSS classes

Kbd.Content Type

Available key values for the keyValue prop:

Modifier Keys	Special Keys	Navigation Keys	Function Keys
`command`	`enter`	`up`	`fn`
`shift`	`delete`	`down`
`ctrl`	`escape`	`left`
`option`	`tab`	`right`
`alt`	`space`	`pageup`
`win`	`capslock`	`pagedown`
	`help`	`home`
		`end`

KbdUpdated