Components
Loading preview...
Display keyboard shortcuts with proper key symbols.
npx shadcn@latest add https://21st.dev/r/tom_ui/kbd"use client";
import { Kbd } from "@/components/ui/kbd";
export function KeyboardListenerDemo() {
return (
<div className="flex min-h-[400px] items-center justify-center gap-4 p-8 text-2xl">
<span className="text-base text-muted-foreground">Press M key to activate</span>
<Kbd keys={[{ display: "Hold", key: "m" }]} listenToKeyboard />
</div>
);
}
export default { KeyboardListenerDemo };