104Get started
HextaUI

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.

QWERTYUIOPASDFGHJKLZXCVBNMShiftSpaceEnter
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>
  )
}

Add this example

This adds the example as components/examples/kbd/listen.tsx, together with the Kbd component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/kbd-listen.json

To add only the component, follow the Kbd installation.

Props in this example

The Kbd props this example sets, from the API reference.

Kbd

PropTypeDefault
keysKeys 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.
string–

KbdGroup

PropTypeDefault
sizePassed to every cap inside.
"sm" | "default" | "lg"–
listenPassed to every cap inside.
boolean–

Every prop is in the Kbd API reference.

More Kbd examples

See them all, with keyboard support and accessibility notes, on the Kbd page.

Related components