# Kbd **Category**: react **URL**: https://www.heroui.com/docs/react/components/kbd **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(typography)/kbd.mdx > Display keyboard shortcuts and key combinations *** ## Import ```tsx import { Kbd } from "@heroui/react"; ``` ### Usage ```tsx import {Kbd} from "@heroui/react"; export function Basic() { return (
K P C D
); } ``` ### Anatomy Import the Kbd component and access all parts using dot notation. ```tsx import { Kbd } from "@heroui/react"; export default () => ( K ); ``` ### Navigation Keys ```tsx import {Kbd} from "@heroui/react"; export function NavigationKeys() { return (
Arrow Keys:
Page Navigation:
); } ``` ### Inline Usage ```tsx import {Kbd} from "@heroui/react"; export function InlineUsage() { return (

Press{" "} Esc {" "} to close the dialog.

Use{" "} K {" "} to open the command palette.

Navigate with{" "} {" "} and{" "} {" "} arrow keys.

Save your work with{" "} S {" "} regularly.

); } ``` ### Instructional Text ```tsx import {Kbd} from "@heroui/react"; export function InstructionalText() { return (

Quick Actions

  • • Open search:{" "} K
  • • Toggle sidebar:{" "} B
  • • New file:{" "} N
  • • Quick save:{" "} S
); } ``` ### Special Keys ```tsx import {Kbd} from "@heroui/react"; export function SpecialKeys() { return (

Press{" "} {" "} to confirm or{" "} {" "} to cancel.

Use{" "} {" "} to navigate between form fields and{" "} {" "} to go back.

Hold{" "} {" "} to temporarily enable panning mode.

); } ``` ### Variants ```tsx import {Kbd} from "@heroui/react"; export function Variants() { return (
Copy: C C
Paste: V V
Cut: X X
Undo: Z Z
Redo: Z Z
); } ``` ## Styling ### Passing Tailwind CSS classes ```tsx import { Kbd } from "@heroui/react"; function CustomKbd() { return ( K ); } ``` ### Customizing the component classes To customize the Kbd component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes). ```css @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](https://getbem.com/) 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](https://github.com/heroui-inc/heroui/blob/v3/packages/styles/components/kbd.css)): #### 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` | Variant of the keyboard 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` | |