# Shadcn Kbd

> Free shadcn/ui kbd component for React to display keyboard shortcuts and key hints in menus, tooltips, and command triggers. Copy or install in one command.

Source: https://designrevision.com/components/kbd

The **Shadcn Kbd** renders a keyboard key or shortcut hint — a small, theme-aware `<kbd>` element for surfacing the shortcut behind an action. Drop it into menus, tooltips, and command triggers.

## When to use

Use `Kbd` anywhere you want to teach a shortcut: next to a menu item, inside a [button](/components/button) like a search or command trigger, or in a tooltip. It is a presentational hint — it does not bind the shortcut itself.

## Showing combinations

The component renders a single key. For a combination, render one `Kbd` per key and group them side by side — for example `⌘` followed by `K`. A flex container with a small gap keeps the spacing tidy.

## Theming

`Kbd` is styled with your `--muted` and `--border` tokens, so it follows your theme — including dark mode — with zero overrides.

## Installation

### kbd

**Install:**

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

**Dependencies:** utils

**Usage & accessibility:** Extends React.ComponentProps<"kbd"> — all native kbd attributes are supported.

```tsx
// components/ui/kbd.tsx
import * as React from "react"

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      className={cn(
        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
        className
      )}
      {...props}
    />
  )
}

export { Kbd }
```

## Examples

### Keys and shortcuts

Single keys and a key combination — render one Kbd per key and group them for a shortcut.

**Install:**

```bash
npx shadcn@latest add @designrevision/kbd-keys-01
```

**Dependencies:** kbd

```tsx
// components/ui/kbd-keys-01.tsx
import { Kbd } from "@/components/ui/kbd"

export default function KbdKeys01() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>↵</Kbd>
      <Kbd>Esc</Kbd>
      <span className="flex items-center gap-1">
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </span>
    </div>
  )
}
```