Kbd

Import

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

Usage

⌘K⇧P⌃C⌥D

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

export function Basic() {
  return (
    <div className="flex items-center gap-4">

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>
);

Arrow Keys:

↑↓←→

Page Navigation:

⇞⇟↖↘

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

export function NavigationKeys() {
  return (
    <div className="flex flex-col gap-4">

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.

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

export function InlineUsage() {
  return (
    <div className="space-y-4">

Instructional Text

Quick Actions

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

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

export function InstructionalText() {
  return (
    <div className="space-y-3">

Special Keys

Press ↵ to confirm or ⎋ to cancel.

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

Hold ␣ to temporarily enable panning mode.

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

export function SpecialKeys() {
  return (
    <div className="space-y-3">

Variants

Copy:⌘C⌘C

Paste:⌘V⌘V

Cut:⌘X⌘X

Undo:⌘Z⌘Z

Redo:⌘⇧Z⌘⇧Z

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

export function Variants() {
  return (
    <div className="flex flex-col gap-4">

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`

Quick Actions

On this page