# Kbd

Display a key or keyboard shortcut.

Keys and key combinations

[Complete TSX file](/examples/kbd/default.tsx)

```tsx
"use client";

import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Kbd>Esc</Kbd>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  );
}
```

## Installation

Complete [one-time setup](/docs/installation/) first.

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/kbd
```

With npm: `npx shadcn@4.18.0 add @siteplane/kbd`. [Registry JSON](/registry/kbd.json) lists source files and dependencies.

For this page’s examples, also install:

```bash
pnpm dlx shadcn@4.18.0 add @siteplane/button @siteplane/input-group
```

## Usage

```tsx
import { Kbd } from "@/siteplane/components/kbd";

<Kbd>Esc</Kbd>;
```

## Composition

```text
KbdGroup
├── Kbd
└── Kbd
```

## In text

Use `KbdGroup` for keys that are pressed together, for example in a hint sentence. The application must implement any shortcut it displays.

Shortcut hint in text

[Complete TSX file](/examples/kbd/group.tsx)

```tsx
"use client";

import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <p className="text-muted-foreground text-sm">
      Press{" "}
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>{" "}
      to open the command menu.
    </p>
  );
}
```

## Input group

Show the shortcut that focuses a field in an input group addon.

Search field with shortcut hint

[Complete TSX file](/examples/kbd/input-group.tsx)

```tsx
"use client";

import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/siteplane/components/input-group";
import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupAddon>
        <SearchIcon aria-hidden="true" />
      </InputGroupAddon>
      <InputGroupInput
        aria-label="Search projects"
        placeholder="Search projects…"
        type="search"
      />
      <InputGroupAddon align="inline-end">
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </InputGroupAddon>
    </InputGroup>
  );
}
```

## Button

Add a shortcut hint after a button label; it becomes part of the button's accessible name.

Print button with shortcut

[Complete TSX file](/examples/kbd/button.tsx)

```tsx
"use client";

import { PrinterIcon } from "lucide-react";
import { Button } from "@/siteplane/components/button";
import { Kbd, KbdGroup } from "@/siteplane/components/kbd";

export default function Example() {
  return (
    <Button variant="outline">
      <PrinterIcon aria-hidden="true" />
      Print
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </Button>
  );
}
```

## API reference

`Kbd` and `KbdGroup` both render native `kbd` elements and accept their attributes, refs, `children` and string `className`. `Kbd` supplies the small muted key surface; `KbdGroup` supplies horizontal spacing without a key surface. There are no owned props or behavior defaults beyond this presentation. See [HTML kbd](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/kbd).

[Read the installed source](/source/kbd).

## Usage notes

Choose shortcut labels for the user’s platform. Do not make a displayed shortcut the only way to discover or invoke an action.