---
title: Kbd
description: Display keyboard shortcuts and key combinations
links:
  source: kbd/kbd.tsx
  styles: kbd.css
  storybook: Components/Typography/Kbd
  figma: true
---

## Usage

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

<ComponentPreview 
  name="kbd-basic"
/>

## Anatomy

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

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

## Examples

### Variants

<ComponentPreview 
  name="kbd-variants"
/>

### Navigation Keys

<ComponentPreview 
  name="kbd-navigation-keys"
/>

### Inline Usage

<ComponentPreview 
  name="kbd-inline-usage"
/>

### Instructional Text

<ComponentPreview 
  name="kbd-instructional-text"
/>

### Special Keys

<ComponentPreview 
  name="kbd-special-keys"
/>

## Customization

### Tailwind CSS

<ComponentPreview name="kbd-custom-styles" />

### Global CSS

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;
  }
}
```

## Styling Reference

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 [!toc]

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

| 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

| 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

| 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`           |               |

## Related Components

<RelatedComponents component="kbd" />
