{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "code-install-command",
  "title": "Code — Install Command",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/code-install-command/CodeInstallCommand.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, Copy, Terminal } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nconst props = withDefaults(defineProps<{ pkg?: string; version?: string }>(), {\n  pkg: '@northwind/metrics',\n  version: '2.4.0',\n})\n\n// One package name, four managers — derived rather than duplicated so a rename\n// cannot leave one tab pointing at the old package.\nconst managers = computed(() => [\n  { id: 'npm', command: `npm install ${props.pkg}` },\n  { id: 'pnpm', command: `pnpm add ${props.pkg}` },\n  { id: 'yarn', command: `yarn add ${props.pkg}` },\n  { id: 'bun', command: `bun add ${props.pkg}` },\n])\n\nconst copied = ref('')\n\nasync function copy(command: string, id: string) {\n  try {\n    await navigator.clipboard.writeText(command)\n    copied.value = id\n    setTimeout(() => (copied.value = ''), 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</script>\n\n<template>\n  <section data-slot=\"code-install-command\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-3xl px-6 py-20\">\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <Badge variant=\"secondary\" class=\"gap-1.5\">\n          <Terminal class=\"size-3\" aria-hidden=\"true\" />\n          Install\n        </Badge>\n        <span class=\"text-muted-foreground font-mono text-xs\">resolved {{ pkg }}@{{ version }}</span>\n      </div>\n\n      <h2 class=\"mt-4 text-2xl font-semibold tracking-tight\">One command, then you own the source</h2>\n\n      <Tabs default-value=\"npm\" class=\"mt-6\">\n        <TabsList variant=\"segmented\" class=\"flex-nowrap overflow-x-auto\">\n          <TabsTrigger v-for=\"manager in managers\" :key=\"manager.id\" :value=\"manager.id\" variant=\"segmented\">\n            {{ manager.id }}\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent v-for=\"manager in managers\" :key=\"manager.id\" :value=\"manager.id\" class=\"mt-4\">\n          <div class=\"border-border bg-card flex items-stretch overflow-hidden rounded-lg border\">\n            <span class=\"text-primary grid shrink-0 place-items-center px-3 font-mono text-xs select-none\">$</span>\n            <code class=\"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              class=\"border-border h-auto shrink-0 rounded-none border-l px-3\"\n              :aria-label=\"`Copy ${manager.id} command`\"\n              @click=\"copy(manager.command, manager.id)\"\n            >\n              <Check v-if=\"copied === manager.id\" class=\"text-success size-4\" aria-hidden=\"true\" />\n              <Copy v-else class=\"size-4\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </TabsContent>\n      </Tabs>\n\n      <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n        Writes the component source into <code class=\"bg-muted rounded px-1 py-0.5 font-mono text-xs\">components/</code>\n        and adds nothing to your lockfile beyond the icon set. Edit it like any other file in your repo.\n      </p>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CodeInstallCommand.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
  ]
}