Navigation: [/sitemap.md](/sitemap.md)

---
type: doc
title: Kbd
description: Used to display textual user input from keyboard.
---

import { Icon } from "@/components/ui/icon"

```astro live props={{ name: 'kbd' }}
---
import { Kbd, KbdGroup } from "@/components/ui/kbd"
---

<div class="flex flex-wrap items-center gap-2">
  <Kbd>⌘</Kbd>
  <Kbd>⇧</Kbd>
  <Kbd>⌥</Kbd>
  <Kbd>⌃</Kbd>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>B</Kbd>
  </KbdGroup>
</div>
```

## Installation

```bash
npx shadcn@latest add @fulldev/kbd
```

## Usage

```ts
import { Kbd } from "@/components/ui/kbd"
```

```astro
<Kbd>Ctrl</Kbd>
```

## Composition

Use the following composition to build `Kbd` and `KbdGroup`:

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

## Examples

### Group

Use the `KbdGroup` component to group keyboard keys together.

```astro live
---
import { Kbd, KbdGroup } from "@/components/ui/kbd"
---

<div class="flex flex-wrap items-center gap-1 text-sm">
  <span>Use</span>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>B</Kbd>
  </KbdGroup>
  <span>or</span>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
  <span>to open the command palette</span>
</div>
```

### Button

Use the `Kbd` component inside a `Button` component to display a keyboard key inside a button.

```astro live
---
import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
---

<Button variant="outline">
  Accept
  <Kbd>⏎</Kbd>
</Button>
```

### Tooltip

You can use the `Kbd` component inside a `Tooltip` component to display a tooltip with a keyboard key.

```astro live
---
import { buttonVariants } from "@/components/ui/button"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
---

<div class="flex flex-wrap items-center gap-3">
  <Tooltip>
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Save
    </TooltipTrigger>
    <TooltipContent>
      Save
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>S</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>

  <Tooltip>
    <TooltipTrigger class={buttonVariants({ variant: "outline" })}>
      Print
    </TooltipTrigger>
    <TooltipContent>
      Print
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </TooltipContent>
  </Tooltip>
</div>
```

### Input Group

You can use the `Kbd` component inside an `InputGroupAddon` component to display a keyboard key inside an input group.

```astro live
---
import { Icon } from "@/components/ui/icon"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { Kbd } from "@/components/ui/kbd"
---

<div class="flex w-full max-w-xs flex-col gap-6">
  <InputGroup>
    <InputGroupInput placeholder="Search..." />
    <InputGroupAddon>
      <Icon name="search" />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </InputGroupAddon>
  </InputGroup>
</div>
```

## API Reference

### Kbd

Use the `Kbd` component to display a keyboard key.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `class` | `string` |         |

```astro
<Kbd>Ctrl</Kbd>
```

### KbdGroup

Use the `KbdGroup` component to group `Kbd` components together.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `class` | `string` |         |

```astro
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
```

See the [GitHub source code](https://github.com/fulldotdev/ui/tree/main/src/components/ui/kbd) for more information on props.