Component

Keyboard Shortcut

Display keyboard shortcut badges and listen for key combinations. Uses the headless @refraction-ui/keyboard-shortcut core.

Examples

Keyboard shortcut badges with key combinations.

Command Palette

Save

Command

Installation

$pnpm add @refraction-ui/react-keyboard-shortcut

Usage

tsx

import { KeyboardShortcut, ShortcutBadge } from '@refraction-ui/react-keyboard-shortcut'
export function MyComponent() {
  return (
    <div>
      <ShortcutBadge keys={['Cmd', 'K']} />
      <KeyboardShortcut keys={['Meta', 'k']} onTrigger={() => console.log('triggered')} />
    </div>
  )
}

Props

Prop	Type	Default	Description
`keys (ShortcutBadge)`	`string[]`	--	Array of key labels to display.
`keys (KeyboardShortcut)`	`string[]`	--	Keys to listen for.
`onTrigger (KeyboardShortcut)`	`() => void`	--	Callback when shortcut is pressed.
`className`	`string`	--	Additional CSS classes.