Skip to content
All 6 kits from $99 · Everything Bundle $149

Hotkeys

DisplayMIT
View in Storybook

Keyboard shortcut reference list grouped by section.

bun add @otfdashkit/ui

Preview

Hotkeys
Loading Storybook preview…

Code

import { Hotkeys } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Open palette</span>
        <Hotkeys keys={['⌘', 'K']} />
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Save</span>
        <Hotkeys keys={['⌘', 'S']} />
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Search</span>
        <Hotkeys keys={['⌘', '⇧', 'F']} />
      </div>
      <div className="flex items-center gap-4">
        <span className="text-sm w-32">Close</span>
        <Hotkeys keys={['Esc']} />
      </div>
    </div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the Hotkeys source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
keysrequiredstring[]
classNamestring