Foundations
Key Hint
Keyboard shortcut hints that adapt to the platform — Cmd on Mac, Ctrl elsewhere.
2 variantsMIT
Preview
- SearchCtrl KCtrlK
- New chatCtrl Shift OCtrlShiftO
- SendEnter↵
- New lineShift EnterShift↵
- Stop generatingEscEsc
Ctrl KCtrlKA↑
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/key-hint.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { Kbd, KeyCombo } from "@/components/ui/key-hint";
<KeyCombo keys="mod+k" /> // ⌘ K on Mac, Ctrl K elsewhere
<KeyCombo keys="shift+enter" />
<Kbd>Esc</Kbd>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| keys* | string | — | KeyCombo: keys joined by "+". mod, shift, alt, ctrl, enter, esc, arrows and letters are mapped per platform. |
| size | "sm" | "md" | "sm" | Chip size for Kbd and KeyCombo. |
| children | ReactNode | — | Kbd: the key label. |
function formatKeys(combo: string, onMac: boolean): string[];
function useIsMac(): boolean; // false during prerender, real value after mount