# Kbd

A keycap printed in a line of text, for shortcuts and docs. Symbols such as ⌘ are read aloud by name. With listen, the cap goes down when the reader presses that key on their own keyboard, so a shortcut list shows its keys working.

- Category: Essentials
- Docs: https://bevel-ui.vercel.app/components/kbd
- Import from: `@/components/ui/kbd`

## Install

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

npm dependencies (installed by the CLI): `cn`.

## Anatomy

```tsx
<KbdGroup>
  <Kbd listen>⌘</Kbd>
  <Kbd listen>K</Kbd>
</KbdGroup>
```

## Parts

| Part | Renders | Description |
| --- | --- | --- |
| `Kbd` | kbd | Its text is the legend. listen: true listens for the printed key (⌘ is Meta, ⇧ is Shift, Esc is Escape); a string names it, such as "k", "Escape" or "mod" (⌘ on Apple, Ctrl elsewhere). Keys typed into a field don't press caps. |
| `KbdGroup` | kbd | Caps pressed together. Each cap listens for its own key, so holding ⌘ presses only ⌘. |

## Example: Keyboard shortcuts

A shortcuts sheet whose caps go down as you press them. Try ⌘K or Esc.

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

const shortcuts = [
  { action: "Open the command menu", keys: ["⌘", "K"] },
  { action: "New conversation", keys: ["⌘", "⇧", "O"] },
  { action: "Stop the agent", keys: ["Esc"] },
  { action: "Send message", keys: ["↵"] },
  { action: "Previous message", keys: ["↑"] },
]

/** A shortcuts sheet. Each cap goes down when you press that key on your own keyboard. */
export function KbdShortcuts() {
  return (
    <div className="w-full max-w-sm rounded-xl border bg-card p-4">
      <p className="text-sm font-semibold">Keyboard shortcuts</p>
      <p className="text-xs text-muted-foreground">Try them: the caps press with your keys.</p>
      <dl className="mt-3 divide-y">
        {shortcuts.map(({ action, keys }) => (
          <div key={action} className="flex items-center justify-between gap-4 py-2 text-sm">
            <dt>{action}</dt>
            <dd>
              <KbdGroup>
                {keys.map((key) => (
                  <Kbd key={key} listen>
                    {key}
                  </Kbd>
                ))}
              </KbdGroup>
            </dd>
          </div>
        ))}
      </dl>
    </div>
  )
}
```