Keyboard

A stylized Mac-style on-screen keyboard component with function row, arrow keys, and gaming-friendly WASD highlighting for showcasing shortcuts or hero UI decoration.

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 (
    <Keyboard
      showWASD={true}
      wasdColorClassName="text-green-500"
      wasdKeyShadowClassName="shadow-green-500"
    />
  );
}