import { Hotkey } from "reshaped";
import type { HotkeyProps } from "reshaped";
Related components

Hotkey component is used to provide a visual representation of the keys user needs to press to perform an action. You can either render the required keys as Hotkey children or combine multiple Hotkey components.

<View gap={4} align="start">
  <View direction="row" gap={1} align="center">
    <Text variant="body-3" weight="medium">

Hotkey supports an active state which you can enable manually. You can use it together with the useHotkeys hook to display the currently pressed keyboard keys.

function HookDemo() {
  const { checkHotkeyState } = useHotkeys({
    k: () => {},

  return <Hotkey active={checkHotkeyState("k")}>K</Hotkey>;