Kbd

Import

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

Usage

Anatomy

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

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

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

Navigation Keys

Inline Usage

Instructional Text

Special Keys

Variants

Styling

Passing Tailwind CSS classes

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

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

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 Props

Prop	Type	Default	Description
children	React.ReactNode	-	Content of the key
variant	`"default"	"light"`	default
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