# Kbd · HeroUI

> Display keyboard shortcuts and key combinations

- Page: https://jiguang132.com/systems/heroui/docs/components/kbd
- Based on: HeroUI documentation (Apache-2.0) @ 60edd8ed751b1d2a270623fbb182bbcfa8baa9af

## Import

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

### Usage


> Example `kbd-basic`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/kbd


### Anatomy

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

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

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

### Navigation Keys


> Example `kbd-navigation-keys`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/kbd


### Inline Usage


> Example `kbd-inline-usage`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/kbd


### Instructional Text


> Example `kbd-instructional-text`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/kbd


### Special Keys


> Example `kbd-special-keys`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/kbd


### Variants


> Example `kbd-variants`: interactive preview on https://jiguang132.com/systems/heroui/docs/components/kbd


## Styling

### Passing Tailwind CSS classes

```tsx
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](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`           |               |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt