---
id: "packages/active-ui/kbd"
title: "Kbd"
description: "A key or a key combination, shown as the reader presses it."
url: "/packages/active-ui/kbd"
locale: "en"
revision: "6b92af844fef359d"
---

# Kbd

`Kbd` shows a key the reader presses, such as `Esc`, and `KbdGroup` a combination such as
`Ctrl + K`. Use it in instructions, tooltips and menus. It only shows the keys: binding a shortcut
is your application's work.

**Example: Keys in a sentence and a combination**

Client: Runs entirely in your browser. Source: `examples/ui/kbd.tsx`.

```tsx
// apps/docs/examples/ui/kbd.tsx
'use client';

import {Kbd, KbdGroup} from '@workspace/active-ui/components/primitives/kbd';

/**
 * Keys as the reader presses them: a single key in a sentence, and a
 * combination as a group. These are the real shortcuts of this site.
 */
export default function KbdExample() {
  return (
    <div className="flex flex-col items-center gap-3 text-sm">
      <p>
        Press{' '}
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>K</Kbd>
        </KbdGroup>{' '}
        to search this site, and <Kbd>Esc</Kbd> to close the search.
      </p>
      <p>
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <span>+</span>
          <Kbd>B</Kbd>
        </KbdGroup>{' '}
        shows or hides the navigation.
      </p>
    </div>
  );
}
```

## Usage

```tsx
import {Kbd, KbdGroup} from '@workspace/active-ui/components/primitives/kbd';

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <span>+</span>
  <Kbd>K</Kbd>
</KbdGroup>;
```

## Anatomy

- `Kbd`: one key, a `<kbd>` element.
- `KbdGroup`: keys that belong together, with a small gap; put the separator you want between
  them.

## What your application provides

- The key names in the reader's language and for their platform, such as `Ctrl` on Windows and
  `⌘` on macOS.
- The shortcut itself, and a way to do the same without it.

## Accessibility

A `<kbd>` is read as its text. Write names a screen reader can say ("Ctrl", "Esc") rather than
symbols alone, or add the name in a visually hidden text beside a symbol.

## API

**Kbd**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

Kbd has no props of its own.

**KbdGroup**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

KbdGroup has no props of its own.

> [!NOTE]
> **Based on shadcn/ui**
>
> This page adapts the Kbd documentation of shadcn/ui (MIT licence) to this
> package; see [Third-party notices](/third-party-notices).