# Kbd: Live keys

> With `listen`, a cap presses down while its real key is held. It only watches, so it never blocks, delays or changes what you type. Letters match by physical key, so Option and Shift don't confuse them.

Example: https://hextaui.com/docs/kbd/examples/listen
Component docs: https://hextaui.com/docs/kbd.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/kbd-listen.json
```

This adds `components/examples/kbd/listen.tsx` with the Kbd component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/kbd/listen.tsx"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

const rows = ["qwertyuiop", "asdfghjkl", "zxcvbnm"]

export function KbdListen() {
  return (
    <KbdGroup listen size="lg" className="flex-col">
      {rows.map((row) => (
        <span key={row} className="flex gap-1">
          {row.split("").map((key) => (
            <Kbd key={key}>{key.toUpperCase()}</Kbd>
          ))}
        </span>
      ))}
      <span className="flex gap-1">
        <Kbd keys="shift" />
        <Kbd keys="space" className="min-w-40" />
        <Kbd keys="enter" />
      </span>
    </KbdGroup>
  )
}
```

## Props in this example

### Kbd

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string` | – | Keys joined with +, like "mod+shift+p". mod is ⌘ on Apple devices and Ctrl elsewhere. Names such as alt, enter, escape, up and space become symbols or short words, and get a spoken name for screen readers. |

### KbdGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "default" \| "lg"` | – | Passed to every cap inside. |
| `listen` | `boolean` | – | Passed to every cap inside. |

## More Kbd examples

- [Variants](https://hextaui.com/docs/kbd/examples/variants.md)
- [Sizes](https://hextaui.com/docs/kbd/examples/sizes.md)
- [Shortcuts](https://hextaui.com/docs/kbd/examples/shortcuts.md)
- [In a button](https://hextaui.com/docs/kbd/examples/button.md)
- [Icons and actions](https://hextaui.com/docs/kbd/examples/composed.md)
- [Right to left](https://hextaui.com/docs/kbd/examples/rtl.md)