# useHeldKeys: Keycaps that press

> `<Kbd listen>` is built on this hook. Each keycap presses down while its key is held.

Example: https://hextaui.com/docs/use-held-keys/examples/shortcut
Component docs: https://hextaui.com/docs/use-held-keys.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/use-held-keys-shortcut.json
```

This adds `components/examples/use-held-keys/shortcut.tsx` with the useHeldKeys component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/use-held-keys/shortcut.tsx"
"use client"

import { Kbd, KbdGroup } from "@/components/ui/kbd"
import { useHeldKeys } from "@/hooks/use-held-keys"
import { useIsApple } from "@/lib/hotkey"

export function UseHeldKeysShortcut() {
  const held = useHeldKeys(true)
  const apple = useIsApple()
  const modifier = apple ? "meta" : "ctrl"
  const ready = held.has(modifier) && held.has("shift")

  return (
    <div className="flex flex-col items-center gap-3 text-sm">
      <KbdGroup>
        <Kbd keys="mod" listen />
        <Kbd keys="shift" listen />
        <Kbd keys="p" listen />
      </KbdGroup>
      <p className="text-muted-foreground">
        {ready ? "Now press P" : "Hold the modifiers to see the hint"}
      </p>
    </div>
  )
}
```