Keyboard

An animated, interactive on-screen Mac-style keyboard that highlights keys as they are pressed (mouse or physical keyboard) with optional per-key click sounds.

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

import { Keyboard } from "@/components/ui/keyboard";

export default function KeyboardDemo() {
  return (
    <div className="flex h-screen w-full items-center justify-center bg-white">
      <Keyboard />
    </div>
  );
}