Components
Starting preview...
Display a keyboard shortcut hint compatible with shadcn/ui components such as Input and Tooltip
npx shadcn@latest add https://21st.dev/r/serafimcloud/hotkeyimport 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,
}