ShortcutHint

Show how to hold keys together to perform a keyboard shortcut.

Press Command + K to open search.

Preview settings

Keycaps2

Size112px

Duration2400ms

Iterations

React

import { ShortcutHint } from "@gestik/react";

<ShortcutHint
  keys={["Command","K"]}
  size={112}
  duration={2400}
  iterations="infinite"
  playing={true}
/>

Props

Prop	Default	Purpose
keys	["Command", "K"]	At least two labels or decorative React elements, in press order. No maximum.
size	Fits the keys (112 by default)	Scene width in pixels; the entire row scales proportionally.
duration	2400	One press, hold, release, and rest cycle in milliseconds.
iterations	"infinite"	Total number of complete cycles, or infinite.
playing	true	Pause or resume at the current frame.
className	—	A class for styling the hint.
style	—	Inline styles and `--gestik-*` CSS variables on the outer span.

Example

Press Command + Option + K to open the command menu. Custom symbols share the mint keycaps with a text legend.

import { ShortcutHint } from "@gestik/react";
import { CommandIcon, OptionIcon } from "@phosphor-icons/react";

<ShortcutHint
  className="custom-shortcut-hint"
  keys={[
    <CommandIcon key="command" weight="bold" />,
    <OptionIcon key="option" weight="bold" />,
    "K",
  ]}
/>

.custom-shortcut-hint {
  --gestik-shortcut-hint-color: #047857;
  --gestik-shortcut-hint-surface: #ecfdf5;
}

Accessibility

ShortcutHint is decorative, stays out of the tab order, and ignores pointer events. Pair it with visible instructions such as “Press Command + K to open search” and an accessible control for the same action. Under reduced motion, every key remains still and released. Your application implements the shortcut and decides when the hint appears. This docs example does not register a keyboard shortcut.