docs: switch to @tool-ui installs and pin chart recharts v2

petekp · petekp · commit 2ea855c8057a · 2026-02-12T14:09:07.000-08:00
diff --git a/app/docs/approval-card/content.mdx b/app/docs/approval-card/content.mdx
@@ -16,7 +16,7 @@ import { ApprovalCard } from "@/components/tool-ui/approval-card";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/approval-card.json
+npx shadcn@latest add @tool-ui/approval-card
 ```
 
 </Step>
diff --git a/app/docs/audio/content.mdx b/app/docs/audio/content.mdx
@@ -16,7 +16,7 @@ import { Audio } from "@/components/tool-ui/audio";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/audio.json
+npx shadcn@latest add @tool-ui/audio
 ```
 
 </Step>
diff --git a/app/docs/chart/content.mdx b/app/docs/chart/content.mdx
@@ -15,7 +15,7 @@ import { DocsHeader } from "../_components/docs-header";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/chart.json
+npx shadcn@latest add @tool-ui/chart
 ```
 
 </Step>
diff --git a/app/docs/citation/content.mdx b/app/docs/citation/content.mdx
@@ -16,7 +16,7 @@ import { Citation } from "@/components/tool-ui/citation";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/citation.json
+npx shadcn@latest add @tool-ui/citation
 ```
 
 </Step>
diff --git a/app/docs/code-block/content.mdx b/app/docs/code-block/content.mdx
@@ -15,7 +15,7 @@ import { DocsHeader } from "../_components/docs-header";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/code-block.json
+npx shadcn@latest add @tool-ui/code-block
 ```
 
 </Step>
diff --git a/app/docs/data-table/content.mdx b/app/docs/data-table/content.mdx
@@ -29,7 +29,7 @@ import {
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/data-table.json
+npx shadcn@latest add @tool-ui/data-table
 ```
 
 </Step>
diff --git a/app/docs/image-gallery/content.mdx b/app/docs/image-gallery/content.mdx
@@ -16,7 +16,7 @@ import { ImageGallery } from "@/components/tool-ui/image-gallery";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/image-gallery.json
+npx shadcn@latest add @tool-ui/image-gallery
 ```
 
 </Step>
diff --git a/app/docs/image/content.mdx b/app/docs/image/content.mdx
@@ -16,7 +16,7 @@ import { Image } from "@/components/tool-ui/image";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/image.json
+npx shadcn@latest add @tool-ui/image
 ```
 
 </Step>
diff --git a/app/docs/instagram-post/content.mdx b/app/docs/instagram-post/content.mdx
@@ -16,7 +16,7 @@ import { InstagramPost } from "@/components/tool-ui/instagram-post";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/instagram-post.json
+npx shadcn@latest add @tool-ui/instagram-post
 ```
 
 </Step>
diff --git a/app/docs/item-carousel/content.mdx b/app/docs/item-carousel/content.mdx
@@ -15,7 +15,7 @@ import { DocsHeader } from "../_components/docs-header";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/item-carousel.json
+npx shadcn@latest add @tool-ui/item-carousel
 ```
 
 </Step>
diff --git a/app/docs/link-preview/content.mdx b/app/docs/link-preview/content.mdx
@@ -16,7 +16,7 @@ import { LinkPreview } from "@/components/tool-ui/link-preview";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/link-preview.json
+npx shadcn@latest add @tool-ui/link-preview
 ```
 
 </Step>
diff --git a/app/docs/linkedin-post/content.mdx b/app/docs/linkedin-post/content.mdx
@@ -16,7 +16,7 @@ import { LinkedInPost } from "@/components/tool-ui/linkedin-post";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/linkedin-post.json
+npx shadcn@latest add @tool-ui/linkedin-post
 ```
 
 </Step>
diff --git a/app/docs/message-draft/content.mdx b/app/docs/message-draft/content.mdx
@@ -16,7 +16,7 @@ import { MessageDraft } from "@/components/tool-ui/message-draft";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/message-draft.json
+npx shadcn@latest add @tool-ui/message-draft
 ```
 
 </Step>
diff --git a/app/docs/option-list/content.mdx b/app/docs/option-list/content.mdx
@@ -15,7 +15,7 @@ import { DocsHeader } from "../_components/docs-header";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/option-list.json
+npx shadcn@latest add @tool-ui/option-list
 ```
 
 </Step>
diff --git a/app/docs/order-summary/content.mdx b/app/docs/order-summary/content.mdx
@@ -16,7 +16,7 @@ import { OrderSummary } from "@/components/tool-ui/order-summary";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/order-summary.json
+npx shadcn@latest add @tool-ui/order-summary
 ```
 
 </Step>
diff --git a/app/docs/parameter-slider/content.mdx b/app/docs/parameter-slider/content.mdx
@@ -16,7 +16,7 @@ import { ParameterSlider } from "@/components/tool-ui/parameter-slider";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/parameter-slider.json
+npx shadcn@latest add @tool-ui/parameter-slider
 ```
 
 </Step>
diff --git a/app/docs/plan/content.mdx b/app/docs/plan/content.mdx
@@ -15,7 +15,7 @@ import { DocsHeader } from "../_components/docs-header";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/plan.json
+npx shadcn@latest add @tool-ui/plan
 ```
 
 </Step>
diff --git a/app/docs/preferences-panel/content.mdx b/app/docs/preferences-panel/content.mdx
@@ -16,7 +16,7 @@ import { PreferencesPanel } from "@/components/tool-ui/preferences-panel";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/preferences-panel.json
+npx shadcn@latest add @tool-ui/preferences-panel
 ```
 
 </Step>
diff --git a/app/docs/progress-tracker/content.mdx b/app/docs/progress-tracker/content.mdx
@@ -16,7 +16,7 @@ import { ProgressTracker } from "@/components/tool-ui/progress-tracker";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/progress-tracker.json
+npx shadcn@latest add @tool-ui/progress-tracker
 ```
 
 </Step>
diff --git a/app/docs/question-flow/content.mdx b/app/docs/question-flow/content.mdx
@@ -15,7 +15,7 @@ import { DocsHeader } from "../_components/docs-header";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/question-flow.json
+npx shadcn@latest add @tool-ui/question-flow
 ```
 
 </Step>
diff --git a/app/docs/quick-start/content.mdx b/app/docs/quick-start/content.mdx
@@ -201,10 +201,10 @@ Tool UI publishes every component as a shadcn registry entry under `https://tool
 }
 ```
 
-2. Run the shadcn CLI with the URL for the component you want. For example:
+2. Run the shadcn CLI with the `@tool-ui/<component>` namespace for the component you want. For example:
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/plan.json
+npx shadcn@latest add @tool-ui/plan
 ```
 
 
diff --git a/app/docs/stats-display/content.mdx b/app/docs/stats-display/content.mdx
@@ -16,7 +16,7 @@ import { StatsDisplay } from "@/components/tool-ui/stats-display";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/stats-display.json
+npx shadcn@latest add @tool-ui/stats-display
 ```
 
 </Step>
diff --git a/app/docs/terminal/content.mdx b/app/docs/terminal/content.mdx
@@ -15,7 +15,7 @@ import { DocsHeader } from "../_components/docs-header";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/terminal.json
+npx shadcn@latest add @tool-ui/terminal
 ```
 
 </Step>
diff --git a/app/docs/video/content.mdx b/app/docs/video/content.mdx
@@ -16,7 +16,7 @@ import { Video } from "@/components/tool-ui/video";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/video.json
+npx shadcn@latest add @tool-ui/video
 ```
 
 </Step>
diff --git a/app/docs/weather-widget/content.mdx b/app/docs/weather-widget/content.mdx
@@ -16,7 +16,7 @@ import { WeatherWidget } from "@/components/tool-ui/weather-widget/runtime";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/weather-widget.json
+npx shadcn@latest add @tool-ui/weather-widget
 ```
 
 </Step>
diff --git a/app/docs/x-post/content.mdx b/app/docs/x-post/content.mdx
@@ -16,7 +16,7 @@ import { XPost } from "@/components/tool-ui/x-post";
 Run this once from your project root.
 
 ```bash
-npx shadcn@latest add https://tool-ui.com/r/x-post.json
+npx shadcn@latest add @tool-ui/x-post
 ```
 
 </Step>
diff --git a/lib/registry/tool-ui-registry.ts b/lib/registry/tool-ui-registry.ts
@@ -57,6 +57,9 @@ const IMPORT_SPECIFIER_RE = /(?:import|export)\s[^"']*from\s+["']([^"']+)["']/g;
 const DYNAMIC_IMPORT_RE = /import\(["']([^"']+)["']\)/g;
 const TOOL_UI_COMPONENTS_DIR = "components/tool-ui";
 const IGNORED_REGISTRY_FILE_NAMES = new Set([".DS_Store", "Thumbs.db"]);
+const DEPENDENCY_VERSION_OVERRIDES: Record<string, string> = {
+  recharts: "2.15.4",
+};
 
 const COMPONENT_DESCRIPTION_OVERRIDES: Partial<Record<string, string>> = {
   "approval-card": "Binary confirmation for agent actions.",
@@ -227,6 +230,11 @@ function toRegistryDependencyFromResolvedPath(
   return value || null;
 }
 
+function withPinnedVersion(pkg: string): string {
+  const pinnedVersion = DEPENDENCY_VERSION_OVERRIDES[pkg];
+  return pinnedVersion ? `${pkg}@${pinnedVersion}` : pkg;
+}
+
 async function discoverToolUiRegistryDefinitions(
   projectRoot: string,
 ): Promise<ToolUiRegistryDefinition[]> {
@@ -326,7 +334,7 @@ async function buildRegistryItem(
       for (const specifier of importSpecifiers) {
         const pkg = toPackageName(specifier);
         if (pkg && pkg !== "react" && pkg !== "react-dom") {
-          dependencySet.add(pkg);
+          dependencySet.add(withPinnedVersion(pkg));
         }
 
         let registryDependency = toRegistryDependency(specifier);
diff --git a/lib/tests/registry/tool-ui-registry.test.ts b/lib/tests/registry/tool-ui-registry.test.ts
@@ -92,4 +92,13 @@ describe("Tool UI registry artifacts", () => {
       }
     }
   });
+
+  it("pins chart dependency to a recharts v2 release compatible with shadcn charts", async () => {
+    const artifacts = await buildToolUiRegistryArtifacts(getProjectRoot());
+    const chartItem = artifacts.items.find((item) => item.name === "chart");
+
+    expect(chartItem, "missing registry item: chart").toBeDefined();
+    expect(chartItem?.dependencies ?? []).toContain("recharts@2.15.4");
+    expect(chartItem?.dependencies ?? []).not.toContain("recharts");
+  });
 });
diff --git a/lib/tests/tool-ui/docs/install-snippet-analytics.test.ts b/lib/tests/tool-ui/docs/install-snippet-analytics.test.ts
@@ -12,7 +12,7 @@ describe("install snippet analytics helpers", () => {
   });
 
   test("detects shadcn registry install commands", () => {
-    const snippet = "npx shadcn@latest add https://tool-ui.com/r/plan.json";
+    const snippet = "npx shadcn@latest add @tool-ui/plan";
     expect(detectInstallSnippetType(snippet)).toBe("registry");
   });
 
diff --git a/public/r/chart.json b/public/r/chart.json
@@ -5,7 +5,7 @@
   "title": "Chart",
   "description": "Visualize data with interactive charts.",
   "dependencies": [
-    "recharts",
+    "recharts@2.15.4",
     "zod"
   ],
   "registryDependencies": [
diff --git a/public/r/registry.json b/public/r/registry.json
@@ -161,7 +161,7 @@
       "title": "Chart",
       "description": "Visualize data with interactive charts.",
       "dependencies": [
-        "recharts",
+        "recharts@2.15.4",
         "zod"
       ],
       "registryDependencies": [
