{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam-card-demo",
  "type": "registry:component",
  "registryDependencies": [
    "border-beam-card"
  ],
  "files": [
    {
      "path": "registry/default/example/border-beam-card-demo.tsx",
      "content": "\"use client\"\n\nimport { useId, useState } from \"react\"\n\nimport {\n  BorderBeamCard,\n  BorderBeamCardContent,\n  BorderBeamCardDescription,\n  BorderBeamCardHeader,\n  BorderBeamCardTitle,\n} from \"@/registry/default/ui/border-beam-card\"\n\nexport default function BorderBeamCardDemo() {\n  const [strength, setStrength] = useState(1)\n  const [active, setActive] = useState(true)\n  const strengthId = useId()\n  const activeId = 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-14\">\n        <header className=\"space-y-2 text-center\">\n          <h2 className=\"font-semibold text-foreground text-xl tracking-tight\">\n            Border beam card\n          </h2>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            <span className=\"text-foreground/90\">BorderBeamCard</span> wraps{\" \"}\n            <code className=\"rounded bg-muted px-1.5 py-0.5 font-mono text-foreground text-xs\">\n              Card\n            </code>{\" \"}\n            with the same header / content slots. Effect layers use{\" \"}\n            <span className=\"text-foreground/90\">pointer-events: none</span>.\n          </p>\n        </header>\n\n        <section className=\"space-y-3\">\n          <h3 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Composable card\n          </h3>\n          <p className=\"text-pretty text-muted-foreground text-sm\">\n            Same slots as <span className=\"text-foreground/90\">Card</span> —\n            header, title, description, content.\n          </p>\n          <BorderBeamCard>\n            <BorderBeamCardHeader>\n              <BorderBeamCardTitle>Border beam card</BorderBeamCardTitle>\n              <BorderBeamCardDescription>\n                Uses <span className=\"text-foreground/90\">Card</span> layout\n                tokens; <span className=\"text-foreground/90\">beamSize</span>{\" \"}\n                controls the glow preset,{\" \"}\n                <span className=\"text-foreground/90\">size</span> matches card\n                density (<span className=\"text-foreground/90\">sm</span> /\n                default).\n              </BorderBeamCardDescription>\n            </BorderBeamCardHeader>\n            <BorderBeamCardContent>\n              <p className=\"text-foreground/90 text-xs/relaxed\">\n                Body content sits in{\" \"}\n                <span className=\"font-mono text-[0.8rem]\">CardContent</span>,\n                with padding aligned to the root{\" \"}\n                <span className=\"font-mono text-[0.8rem]\">size</span>.\n              </p>\n            </BorderBeamCardContent>\n          </BorderBeamCard>\n        </section>\n\n        <section className=\"space-y-3\">\n          <h3 className=\"font-semibold text-foreground text-lg tracking-tight\">\n            Color variants\n          </h3>\n          <div className=\"grid gap-4 sm:grid-cols-2\">\n            <BorderBeamCard colorVariant=\"colorful\" theme=\"auto\">\n              <BorderBeamCardContent className=\"pt-0\">\n                <p className=\"font-medium text-foreground text-sm\">colorful</p>\n              </BorderBeamCardContent>\n            </BorderBeamCard>\n            <BorderBeamCard colorVariant=\"mono\" staticColors theme=\"auto\">\n              <BorderBeamCardContent className=\"pt-0\">\n                <p className=\"font-medium text-foreground text-sm\">mono</p>\n              </BorderBeamCardContent>\n            </BorderBeamCard>\n            <BorderBeamCard colorVariant=\"ocean\" theme=\"auto\">\n              <BorderBeamCardContent className=\"pt-0\">\n                <p className=\"font-medium text-foreground text-sm\">ocean</p>\n              </BorderBeamCardContent>\n            </BorderBeamCard>\n            <BorderBeamCard colorVariant=\"sunset\" theme=\"auto\">\n              <BorderBeamCardContent className=\"pt-0\">\n                <p className=\"font-medium text-foreground text-sm\">sunset</p>\n              </BorderBeamCardContent>\n            </BorderBeamCard>\n          </div>\n        </section>\n      </div>\n    </main>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}