Shortcuts Dialog React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Shortcuts Dialog is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ShortcutsDialog from @/components/ui/shortcuts-dialog.

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

const groups: ShortcutGroup[] = [
  {
    label: "General",
    items: [
      { label: "Search", shortcut: ["mod+k", "/"] },
      { label: "Shortcuts", shortcut: "?" },
      { label: "Toggle sidebar", shortcut: "mod+b" },
    ],
  },
  {
    label: "Navigation",
    items: [
      { label: "Go to Inbox", shortcut: ["g", "i"], sequence: true },
      { label: "Go to Clients", shortcut: ["g", "c"], sequence: true },
    ],
  },
  {
    label: "Invoices",
    items: [
      { label: "New invoice", shortcut: "f", keywords: ["issue"] },
      { label: "Send by email", shortcut: "mod+enter" },
      { label: "Download PDF", shortcut: "shift+mod+d" },
    ],
  },
]

export function HelpShortcuts() {
  return (
    <ShortcutsDialog
      groups={groups}
      title="Keyboard shortcuts"
      hint={
        <span className="inline-flex items-center gap-1.5">
          Press <Kbd shortcut="?" size="sm" /> any time to open the list
        </span>
      }
      trigger={
        <Button variant="soft" size="sm" leftIcon={<Keyboard />}>
          Shortcuts
        </Button>
      }
    />
  )
}

Props

• groupsdefault "[]"
  ShortcutGroup[]

  { id?, label?: ReactNode, textValue?, items: ShortcutEntry[] }. An entry is { id?, label: ReactNode, shortcut: string | string[], description?: ReactNode, sequence?: boolean, keywords?: string[], textValue?: string }. Shortcuts use mod+k notation; an array is alternatives ("mod+k" or "/"), or the keys of a sequence when sequence is true (["g", "i"]). An unparseable shortcut shows its raw text in one cap. Empty groups are hidden.

• titledefault "Keyboard shortcuts"
  ReactNode

  The dialog title. "" keeps it for screen readers only.

• descriptiondefault ""
  ReactNode

  A muted line under the title.

• searchPlaceholderdefault "Search shortcuts"
  string

  The search field's placeholder and accessible name.

• emptyTextdefault "No shortcuts found"
  ReactNode

  Shown when nothing matches the search.

• thenLabeldefault "then"
  string

  Between the keys of a sequence ("G then I"). Screen readers read it too.

• orLabeldefault "or"
  string

  Between alternatives ("⌘ K or /").

• closeLabeldefault "Close"
  string

  aria-label of the close button.

• clearLabeldefault "Clear"
  string

  aria-label of the search's clear button.

• hint
  ReactNode

  The footer line. Default: "Press ? anytime to see this list" with the bound key as a cap, hidden on touch screens; null hides it. Pass a translated node for localized apps.

• sizedefault "lg"
  "md" | "lg" | "xl"

  The dialog's max width: 520 / 720 / 960px. On phones the sheet with a search is 92% tall, so filtering never resizes it; without a search it fits its content.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corner shape of the card (sm 12px, md 16px, lg 24px) and of the phone sheet's top corners.

• platformdefault "auto"
  "auto" | "apple" | "other"

  The key notation: apple shows ⌘ ⇧ ⌥ glyphs, other Ctrl / Shift / Alt words. auto renders the other form on the server, then the device's.

• kbdVariantdefault "soft"
  "soft" | "outline" | "solid"

  The key cap look: the quiet gray key, a bordered key or a raised physical key.

• kbdSizedefault "sm"
  "sm" | "md"

  Key cap height, 16 or 20px.

• columnsdefault 2
  1 | 2

  Groups side by side from 768px. Phones always get one column.

• defaultOpendefault false
  boolean

  Starts open while uncontrolled.

• open
  boolean

  Controlled open state; pair it with onOpenChange (e.g. to open it from a help menu entry).

• onOpenChange
  (open: boolean) => void

  Called when it opens or closes (trigger, shortcut, Esc, outside click, swipe).

• shortcutdefault "?"
  string

  Opens and closes it from anywhere, in mod+k notation. Keys without a modifier never fire while typing, so "?" in the search types a "?". "" binds nothing. The showcase itself listens for ?, so the demo binds ⌘/ in its place.

• searchdefault true
  boolean

  A filter field above the groups. It matches labels, keywords, descriptions and the shortcut in both notations, ignoring case and diacritics; it takes focus on open only with a mouse or trackpad.

• responsivedefault true
  boolean

  A bottom sheet below 768px (one column, search pinned). false keeps the centered card on phones.

• trigger
  ReactNode

  The element that opens it, rendered with asChild (a single element that takes a ref); it gets aria-keyshortcuts.

• container
  HTMLElement | null

  Portal target, document.body by default.

• classNames
  Partial<Record<"content" | "header" | "search" | "groups" | "group" | "groupLabel" | "row" | "label" | "description" | "keys" | "then" | "or" | "mark" | "empty" | "hint", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the dialog card (or the sheet), merged last. Other props (aria-*, data-*, style, onOpenAutoFocus, onEscapeKeyDown, ref) go to the same element.

FAQ

More React overlay components