Kbd Input Group

A search input field with a leading search icon and trailing keyboard shortcut badges (like ⌘K) to hint a global keyboard shortcut.

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

import KbdInputGroup from "@/components/ui/kbd-input-group";

export default function KbdInputGroupDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <KbdInputGroup />
    </div>
  );
}