import CodeRender from '../../CodeRender'

### Kbd

<CodeRender code={`
<kbd class="kbd">A</kbd>

`} />
  
```html
<kbd class="kbd">A</kbd>

```
### Kbd sizes

<CodeRender className='gap-2' code={`
<kbd class="kbd kbd-lg">Shift</kbd>
<kbd class="kbd kbd-md">Shift</kbd>
<kbd class="kbd kbd-sm">Shift</kbd>
<kbd class="kbd kbd-xs">Shift</kbd>

`} />
  
```html
<kbd class="kbd kbd-lg">Shift</kbd>
<kbd class="kbd kbd-md">Shift</kbd>
<kbd class="kbd kbd-sm">Shift</kbd>
<kbd class="kbd kbd-xs">Shift</kbd>

```
### In text

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

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

```
### Key combination

<CodeRender className='gap-1' code={`
<kbd class="kbd">ctrl</kbd>
+
<kbd class="kbd">shift</kbd>
+
<kbd class="kbd">del</kbd>

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

```
### Function Keys

<CodeRender code={`
<kbd class="kbd">⌘</kbd>
<kbd class="kbd">⌥</kbd>
<kbd class="kbd">⇧</kbd>
<kbd class="kbd">⌃</kbd>

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

```
### A full keyboard

<CodeRender code={`
<div class="overflow-x-auto">
  <div class="flex justify-center gap-1 w-full">
    <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="flex justify-center gap-1 w-full">
    <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="flex justify-center gap-1 w-full">
    <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>
</div>

`} />
  
```html
<div class="overflow-x-auto">
  <div class="flex justify-center gap-1 w-full">
    <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="flex justify-center gap-1 w-full">
    <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="flex justify-center gap-1 w-full">
    <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>
</div>

```
### Arrow Keys

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

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

```   

    