# daisyUI Documentation - Kbd Component

Kbd is used to display keyboard shortcuts.

## Classes and Usage

### Core Classes:
- **kbd** - The main kbd element
- **kbd-xs** - Extra small size
- **kbd-sm** - Small size
- **kbd-md** - Medium size [Default]
- **kbd-lg** - Large size
- **kbd-xl** - Extra large size

## Examples

### Basic Kbd

`K`

```html
<kbd class="kbd">K</kbd>
```

### Kbd Sizes

`Xsmall` `Small` `Medium` `Large` `Xlarge`

```html
<kbd class="kbd kbd-xs">Xsmall</kbd>
<kbd class="kbd kbd-sm">Small</kbd>
<kbd class="kbd kbd-md">Medium</kbd>
<kbd class="kbd kbd-lg">Large</kbd>
<kbd class="kbd kbd-xl">Xlarge</kbd>
```

### In Text

Press `F` to pay respects.

```html
Press
<kbd class="kbd kbd-sm">F</kbd>
to pay respects.
```

### Key Combination

`ctrl` + `shift` + `del`

```html
<kbd class="kbd">ctrl</kbd>
+
<kbd class="kbd">shift</kbd>
+
<kbd class="kbd">del</kbd>
```

### Function Keys

`⌘` `⌥` `⇧` `⌃`

```html
<kbd class="kbd">⌘</kbd>
<kbd class="kbd">⌥</kbd>
<kbd class="kbd">⇧</kbd>
<kbd class="kbd">⌃</kbd>
```

### A Full Keyboard

```html
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="kbd">q</kbd>
  <kbd class="kbd">w</kbd>
  <kbd class="kbd">e</kbd>
  <kbd class="kbd">r</kbd>
  <kbd class="kbd">t</kbd>
  <kbd class="kbd">y</kbd>
  <kbd class="kbd">u</kbd>
  <kbd class="kbd">i</kbd>
  <kbd class="kbd">o</kbd>
  <kbd class="kbd">p</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="kbd">a</kbd>
  <kbd class="kbd">s</kbd>
  <kbd class="kbd">d</kbd>
  <kbd class="kbd">f</kbd>
  <kbd class="kbd">g</kbd>
  <kbd class="kbd">h</kbd>
  <kbd class="kbd">j</kbd>
  <kbd class="kbd">k</kbd>
  <kbd class="kbd">l</kbd>
</div>
<div class="my-1 flex w-full justify-center gap-1">
  <kbd class="kbd">z</kbd>
  <kbd class="kbd">x</kbd>
  <kbd class="kbd">c</kbd>
  <kbd class="kbd">v</kbd>
  <kbd class="kbd">b</kbd>
  <kbd class="kbd">n</kbd>
  <kbd class="kbd">m</kbd>
  <kbd class="kbd">/</kbd>
</div>
```

### Arrow Keys

```html
<div class="flex w-full justify-center">
  <kbd class="kbd">▲</kbd>
</div>
<div class="flex w-full justify-center gap-12">
  <kbd class="kbd">◀︎</kbd>
  <kbd class="kbd">▶︎</kbd>
</div>
<div class="flex w-full justify-center">
  <kbd class="kbd">▼</kbd>
</div>
```

## Features

- Displays keyboard shortcuts and key combinations
- Multiple size options (xs, sm, md, lg, xl)
- Works with individual keys or combinations
- Can be styled to look like physical keyboard keys
- Responsive design

This component is useful for documenting keyboard shortcuts in applications or guides.