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

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/kbd/kbd-demo.astro"
---
import { Kbd, KbdGroup } from "@/components/ui/kbd"
---

<div class="flex flex-col items-center gap-4">
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
  </KbdGroup>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>B</Kbd>
  </KbdGroup>
</div>
```

## Installation

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

## Usage

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

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

## Composition

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

## Group

Use `KbdGroup` to group keyboard keys together.

```astro title="src/components/examples/kbd/kbd-group.astro"
---
import { Kbd, KbdGroup } from "@/components/ui/kbd"
---

<div class="flex flex-col items-center gap-4">
  <div class="text-sm text-muted-foreground">
    Use
    <KbdGroup>
      <Kbd>Ctrl + B</Kbd>
      <Kbd>Ctrl + K</Kbd>
    </KbdGroup>
    to open the command palette
  </div>
</div>
```

## Button

Put a `Kbd` inside a `Button`, with `data-icon="inline-end"` for the icon spacing.

```astro title="src/components/examples/kbd/kbd-button.astro"
---
import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"
---

<Button variant="outline">
  Accept
  <Kbd data-icon="inline-end" class="translate-x-0.5">
    ⏎
  </Kbd>
</Button>
```

## Tooltip

Put a `Kbd` inside `TooltipContent`.

```astro title="src/components/examples/kbd/kbd-tooltip.astro"
---
import { buttonVariants } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
---

<div class="flex flex-wrap gap-4">
  <ButtonGroup>
    <Tooltip>
      <TooltipTrigger
        class={buttonVariants({ variant: "outline", class: "rounded-r-none" })}
      >
        Save
      </TooltipTrigger>
      <TooltipContent>
        Save Changes <Kbd>S</Kbd>
      </TooltipContent>
    </Tooltip>
    <Tooltip>
      <TooltipTrigger
        class={buttonVariants({
          variant: "outline",
          class: "rounded-l-none border-l-0",
        })}
      >
        Print
      </TooltipTrigger>
      <TooltipContent>
        Print Document
        <KbdGroup>
          <Kbd>Ctrl</Kbd>
          <Kbd>P</Kbd>
        </KbdGroup>
      </TooltipContent>
    </Tooltip>
  </ButtonGroup>
</div>
```

## Input Group

Put a `Kbd` inside an `InputGroupAddon`.

```astro title="src/components/examples/kbd/kbd-input-group.astro"
---
import SearchIcon from "@lucide/astro/icons/search"

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>
      <SearchIcon />
    </InputGroupAddon>
    <InputGroupAddon align="inline-end">
      <Kbd>⌘</Kbd>
      <Kbd>K</Kbd>
    </InputGroupAddon>
  </InputGroup>
</div>
```

## RTL

```astro title="src/components/examples/kbd/kbd-rtl.astro"
---
import { Kbd, KbdGroup } from "@/components/ui/kbd"

const translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
} as const

const { dir } = translations.ar
---

<div class="flex flex-col items-center gap-4" dir={dir}>
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>⇧</Kbd>
    <Kbd>⌥</Kbd>
    <Kbd>⌃</Kbd>
  </KbdGroup>
  <KbdGroup>
    <Kbd>Ctrl</Kbd>
    <span>+</span>
    <Kbd>B</Kbd>
  </KbdGroup>
</div>
```

## API Reference

Source: [`src/components/ui/kbd`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/kbd)

| Component  | Element | Data Slot   |
| ---------- | ------- | ----------- |
| `Kbd`      | `kbd`   | `kbd`       |
| `KbdGroup` | `div`   | `kbd-group` |

Both take `class` and pass all other attributes through. `KbdGroup` renders a
`div`, so do not nest it in a `p`.

## Install what this page shows

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