{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam-input-demo",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "border-beam-input"
  ],
  "files": [
    {
      "path": "registry/default/example/border-beam-input-demo.tsx",
      "content": "\"use client\"\n\nimport { useId } from \"react\"\nimport { Search } from \"lucide-react\"\n\nimport {\n  BorderBeamInput,\n  BorderBeamInputGroup,\n  BorderBeamInputGroupAddon,\n  BorderBeamInputGroupInput,\n} from \"@/registry/default/ui/border-beam-input\"\n\nexport default function BorderBeamInputDemo() {\n  const searchId = useId()\n\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center\">\n      <div className=\"flex w-full max-w-3xl flex-col gap-10\">\n        <header className=\"space-y-2 text-center\">\n          <h2 className=\"font-semibold text-foreground text-xl tracking-tight\">\n            Border beam input\n          </h2>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            <span className=\"text-foreground/90\">BorderBeamInput</span> and{\" \"}\n            <span className=\"text-foreground/90\">BorderBeamInputGroup</span>{\" \"}\n            default to{\" \"}\n            <span className=\"text-foreground/90\">\n              beamSize=&quot;line&quot;\n            </span>{\" \"}\n            (bottom-travel glow). Use{\" \"}\n            <span className=\"text-foreground/90\">pill</span> on the group for a\n            rounded search bar. Addons match{\" \"}\n            <code className=\"rounded bg-muted px-1.5 py-0.5 font-mono text-foreground text-xs\">\n              InputGroup\n            </code>{\" \"}\n            composition.\n          </p>\n        </header>\n\n        <section className=\"space-y-3\">\n          <h3 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Single input & pill group\n          </h3>\n          <div className=\"flex max-w-md flex-col gap-4\">\n            <BorderBeamInput placeholder=\"Single input, line beam…\" />\n            <BorderBeamInputGroup className=\"max-w-md\" pill>\n              <label className=\"sr-only\" htmlFor={searchId}>\n                Search\n              </label>\n              <BorderBeamInputGroupAddon aria-hidden>\n                <Search className=\"size-4 text-muted-foreground\" />\n              </BorderBeamInputGroupAddon>\n              <BorderBeamInputGroupInput\n                id={searchId}\n                placeholder=\"Search…\"\n                type=\"search\"\n              />\n            </BorderBeamInputGroup>\n          </div>\n        </section>\n\n        <section className=\"space-y-3\">\n          <h3 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Line beam (InputGroup)\n          </h3>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Same pattern as a compact toolbar search — icon + control inside{\" \"}\n            <span className=\"text-foreground/90\">BorderBeamInputGroup</span>.\n          </p>\n          <div className=\"pb-8\">\n            <BorderBeamInputGroup className=\"max-w-md\" theme=\"auto\">\n              <label className=\"sr-only\" htmlFor=\"border-beam-line-input-demo\">\n                Search\n              </label>\n              <BorderBeamInputGroupAddon aria-hidden>\n                <Search className=\"size-4 text-muted-foreground\" />\n              </BorderBeamInputGroupAddon>\n              <BorderBeamInputGroupInput\n                id=\"border-beam-line-input-demo\"\n                placeholder=\"line beam (InputGroup)…\"\n                type=\"search\"\n              />\n            </BorderBeamInputGroup>\n          </div>\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}