Shortcuts dialog

Pro

Every keyboard shortcut, grouped by where it works, printed for this platform (⌘ on a Mac, Ctrl elsewhere). List only shortcuts that are bound: this is a reference, not a wish list. Usually opened with "?".

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/shortcuts-dialog

Brings in: dialog, kbd, locale, use-shortcut

Usage

TSX · The example above

"use client"

import * as React from "react"
import { Keyboard } from "lucide-react"
import { ShortcutsDialog, type ShortcutGroup } from "@/components/shortcuts-dialog"
import { Button } from "@/components/ui/button"

const groups: ShortcutGroup[] = [
  {
    heading: "Anywhere",
    items: [
      { combo: "mod+k", label: "Search or jump" },
      { combo: "mod+shift+o", label: "New thread" },
      { combo: "?", label: "Keyboard shortcuts" },
    ],
  },
  {
    heading: "In a thread",
    items: [
      { combo: "mod+enter", label: "Send" },
      { combo: "escape", label: "Stop the agent" },
    ],
  },
]

export default function Example() {
  const [open, setOpen] = React.useState(false)
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        <Keyboard /> Keyboard shortcuts
      </Button>
      <ShortcutsDialog open={open} onOpenChange={setOpen} groups={groups} />
    </>
  )
}

<ShortcutsDialog>

Prop	Type	Default	Description
openrequired	`boolean`	—	Whether the dialog is showing.
onOpenChangerequired	`(open: boolean) => void`	—	Called when the dialog opens or closes.
groupsrequired	`ShortcutGroup[]`	—	The bound shortcuts, under headings for where they work.

Strings

The fixed words, in English by default. Change any of them under shortcutsDialog in <LocaleProvider strings={{ … }}>; the table is exported as shortcutsDialogStrings.

Key	English
title	Keyboard shortcuts
description	Press ? anywhere outside a text field to open this.

Types

ShortcutGroup: { heading: string; items: { combo: string; label: string }[] }