{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "code-install-command",
  "title": "Code — Install Command",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/code-install-command/CodeInstallCommand.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, Copy, Terminal } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\ninterface CodeInstallCommandProps {\n  pkg?: string\n  version?: string\n}\n\nexport function CodeInstallCommand({ pkg = '@northwind/metrics', version = '2.4.0' }: CodeInstallCommandProps) {\n  // One package name, four managers — derived rather than duplicated so a\n  // rename cannot leave one tab pointing at the old package.\n  const managers = [\n    { id: 'npm', command: `npm install ${pkg}` },\n    { id: 'pnpm', command: `pnpm add ${pkg}` },\n    { id: 'yarn', command: `yarn add ${pkg}` },\n    { id: 'bun', command: `bun add ${pkg}` },\n  ]\n\n  const [copied, setCopied] = useState('')\n\n  async function copy(command: string, id: string) {\n    try {\n      await navigator.clipboard.writeText(command)\n      setCopied(id)\n      setTimeout(() => setCopied(''), 1600)\n    } catch {\n      // Clipboard blocked (insecure context or denied permission): leave the\n      // command visible so it can still be selected by hand.\n    }\n  }\n\n  return (\n    <section data-slot=\"code-install-command\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-3xl px-6 py-20\">\n        <div className=\"flex flex-wrap items-center gap-3\">\n          <Badge variant=\"secondary\" className=\"gap-1.5\">\n            <Terminal className=\"size-3\" aria-hidden=\"true\" />\n            Install\n          </Badge>\n          <span className=\"text-muted-foreground font-mono text-xs\">\n            resolved {pkg}@{version}\n          </span>\n        </div>\n\n        <h2 className=\"mt-4 text-2xl font-semibold tracking-tight\">One command, then you own the source</h2>\n\n        <Tabs defaultValue=\"npm\" className=\"mt-6\">\n          <TabsList variant=\"segmented\" className=\"flex-nowrap overflow-x-auto\">\n            {managers.map((manager) => (\n              <TabsTrigger key={manager.id} value={manager.id} variant=\"segmented\">\n                {manager.id}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n\n          {managers.map((manager) => (\n            <TabsContent key={manager.id} value={manager.id} className=\"mt-4\">\n              <div className=\"border-border bg-card flex items-stretch overflow-hidden rounded-lg border\">\n                <span className=\"text-primary grid shrink-0 place-items-center px-3 font-mono text-xs select-none\">\n                  $\n                </span>\n                <code className=\"bg-muted/25 min-w-0 flex-1 truncate px-3 py-2.5 font-mono text-sm\">\n                  {manager.command}\n                </code>\n                <Button\n                  variant=\"ghost\"\n                  className=\"border-border h-auto shrink-0 rounded-none border-l px-3\"\n                  aria-label={`Copy ${manager.id} command`}\n                  onClick={() => copy(manager.command, manager.id)}\n                >\n                  {copied === manager.id ? (\n                    <Check className=\"text-success size-4\" aria-hidden=\"true\" />\n                  ) : (\n                    <Copy className=\"size-4\" aria-hidden=\"true\" />\n                  )}\n                </Button>\n              </div>\n            </TabsContent>\n          ))}\n        </Tabs>\n\n        <p className=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          Writes the component source into{' '}\n          <code className=\"bg-muted rounded px-1 py-0.5 font-mono text-xs\">components/</code> and adds nothing to your\n          lockfile beyond the icon set. Edit it like any other file in your repo.\n        </p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CodeInstallCommand.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/tabs.json"
  ],
  "description": "Package-manager tab strip over a single install command with a copy button, a resolved-version line, and a short note on what the command writes to disk.",
  "categories": [
    "marketing"
  ]
}