Hotkey

Component 12

About

Display a keyboard shortcut hint compatible with shadcn/ui components such as Input and Tooltip

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hotkey to your project and fits it to your theme.

Code

How Hotkey is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react"
import { Hotkey } from "@/components/ui/hotkey"
import { Save } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

function HotkeyDefault() {
  return <Hotkey keys={["S"]} />
}

function HotkeyWithModifier() {
  return <Hotkey keys={["K"]} modifier={true} />
}

function HotkeyMultipleKeys() {
  return <Hotkey keys={["⇧", "?"]} />;
}

function HotkeyInTooltip() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">
            <Save className="w-4 h-4 mr-2" />
            Save button with tooltip
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p className="flex items-center">
            Save <Hotkey keys={["S"]} />
          </p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

function HotkeyWithInput() {
  return (
    <div className="relative flex items-center max-w-[400px]">
      <Input placeholder="Search..." className="pr-12" />
      <div className="absolute top-0 right-3 h-full flex items-center pointer-events-none">
        <Hotkey keys={["K"]} modifier={true} />
      </div>
    </div>
  )
}

function HotkeyDarkBackground() {
  return (
    <div className="bg-foreground w-10 h-10 flex items-center justify-center rounded-md pr-2">
      <Hotkey keys={["D"]} isBackgroundDark={true} />
    </div>
  )
}

function HotkeyWithButton() {
  return (
    <Button>
      Save <Hotkey keys={["S"]} isBackgroundDark={true} />
    </Button>
  )
}

export default {
  HotkeyDefault,
  HotkeyWithModifier,
  HotkeyMultipleKeys,
  HotkeyInTooltip,
  HotkeyWithInput,
  HotkeyDarkBackground,
  HotkeyWithButton,
}