Shortcut overlay

Modal showing all registered keyboard shortcuts, triggered by pressing ?.

Install

npx shadcn@latest add https://substrate.georgedrury.co.uk/r/shortcut-overlay

"use client"

import { useState } from "react"

Prop	Type	Default	Description
`groups`	`ShortcutGroup[]`	—	Groups of shortcuts to display
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Controlled open change handler
`trigger`	`string`	`"?"`	Key that toggles the overlay

type ShortcutGroup = {
	heading: string
	shortcuts: { key: string; label: string }[]
}

The key string is split on + and each part rendered as an individual <kbd>. For example "⌘ + Z" renders as two separate key badges.

Component	Description
`ShortcutOverlay`	Dialog modal with ? key listener
`ShortcutKey`	Inline keyboard shortcut badge (reusable standalone)