---
title: "Kbd"
description: "A key or a keyboard shortcut drawn as a key cap. It only shows the shortcut; the app handles the keys. Inside a menu item it is announced as the item’s shortcut."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Kbd

## In a sentence

```tsx
import { Kbd } from '@arbol-ai/ui';

<p className="text-muted-foreground text-sm">
  Press <Kbd>J</Kbd> and <Kbd>K</Kbd> to move between conversations, and <Kbd>Esc</Kbd> to close the
  panel.
</p>
```

## A combination

KbdGroup draws each key of a combination separately.

```tsx
import { Kbd, KbdGroup } from '@arbol-ai/ui';

<div className="flex items-center gap-3 text-sm">
  Send the reply
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>Enter</Kbd>
  </KbdGroup>
</div>
```

## Source

The examples above are [`src/components/kbd/kbd.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/kbd/kbd.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/data/kbd/index.mdx