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>;