Kbd

Keyboard keys and shortcuts that glow when pressed.

Hold ⌘ and press K. The keys light up as you type.

Installation#

npx shadcn@latest add https://get-neonkit.vercel.app/r/kbd.json

import { Kbd, KbdCombo } from "@/components/ui/kbd"

<KbdCombo keys={["⌘", "K"]} listen />
<Kbd listen="Shift">Shift</Kbd>

separator accepts any node, or null for keys side by side.

listen takes a KeyboardEvent.key value and matches it case-insensitively.

Press Shift, any modifier or the space bar.

pressed forces the lit state, for tutorials and game controls.

⌘Command+K⌘Command+K⌘Command+K

WASD

Renders a kbd element and accepts every native attribute.

Prop	Type	Default
`size`	`"sm" \| "md" \| "lg"` 20, 24 or 32px tall.	`"md"`
`pressed`	`boolean` Forces the lit, pushed-down state.	`false`
`listen`	`string` KeyboardEvent.key to watch, like "k", "Shift", "Meta" or "Enter". Lights up while held.	`—`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	`inherited`

A kbd that wraps one Kbd per key, as HTML recommends for key combinations.

Prop	Type	Default
`keys`	`string[]` Key labels in order. ⌘ ⌥ ⇧ ⌃ ↵ and arrows get spoken names.	`—`
`listen`	`boolean` Each key listens for itself. ⌘ maps to Meta, ⌥ to Alt, ⇧ to Shift, ⌃ to Control, ↵ to Enter, Esc to Escape.	`false`
`separator`	`ReactNode` Rendered between keys. Pass null for none.	`"+"`
`size`	`"sm" \| "md" \| "lg"` Size of every key.	`"md"`
`color`	`NeonColor` Color of every key.	`inherited`

Kbd is display only. listen never prevents default or triggers anything, so wire the real shortcut yourself.
Symbol keys in KbdCombo carry a screen reader label, so ⌘ is read as "Command".
Held keys clear when the window loses focus, and releasing ⌘ clears the rest because macOS drops their keyup events.