setup shadcn registry (#431)

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

Author: hari

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_URL=https://animata.design

.gitignore

@@ -39,5 +39,9 @@ next-env.d.ts
 
 *storybook.log
 public/preview
+public/r
+public/docs
+public/llms.txt
+public/llms-full.txt
 _internal/
 .superset/

components/mdx-components.tsx

@@ -26,6 +26,7 @@ import { CopyProxy } from "@/components/copy-proxy";
 import { AnimataRenderer } from "@/components/dynamic-animata";
 import { FrameworkDocs } from "@/components/framework-docs";
 import PreviewContainer from "@/components/preview-container";
+import { RegistryInstall } from "@/components/registry-install";
 import {
   Accordion,
   AccordionContent,
@@ -199,6 +200,7 @@ const components = {
   ComponentPreview,
   ComponentExample,
   ComponentSource,
+  RegistryInstall,
   AspectRatio,
   CodeBlockWrapper: ({ ...props }) => <CodeBlockWrapper className="rounded-md border" {...props} />,
   Step: ({ className, ...props }: ComponentProps<"h3">) => (

components/registry-install.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { CopyNpmCommandButton } from "@/components/copy-button";
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
+
+type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
+
+const REGISTRY_BASE_URL = (process.env.NEXT_PUBLIC_APP_URL || siteConfig.url).replace(/\/$/, "");
+
+interface RegistryInstallProps {
+  category: string;
+  name: string;
+  className?: string;
+}
+
+export function RegistryInstall({ category, name, className }: RegistryInstallProps) {
+  const url = `${REGISTRY_BASE_URL}/r/${category}/${name}.json`;
+  const commands: Record<PackageManager, string> = {
+    pnpm: `pnpm dlx shadcn@latest add ${url}`,
+    npm: `npx shadcn@latest add ${url}`,
+    yarn: `yarn dlx shadcn@latest add ${url}`,
+    bun: `bunx shadcn@latest add ${url}`,
+  };
+
+  return (
+    <pre
+      className={cn(
+        "w-full grid grid-cols-[1fr_auto] mt-4 rounded-lg bg-zinc-800 p-4 [&_code]:bg-transparent",
+        className,
+      )}
+    >
+      <code
+        className={cn(
+          "relative rounded max-w-full overflow-x-auto bg-zinc-800 px-2 py-[0.2rem] font-mono text-sm text-white",
+          className,
+        )}
+      >
+        {commands.pnpm}
+      </code>
+
+      <CopyNpmCommandButton
+        commands={{
+          __npmCommand__: commands.npm,
+          __yarnCommand__: commands.yarn,
+          __pnpmCommand__: commands.pnpm,
+          __bunCommand__: commands.bun,
+        }}
+      />
+    </pre>
+  );
+}

content/docs/accordion/faq.mdx

@@ -9,11 +9,17 @@ published: false
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="accordion" name="faq" />
+
+### Manual
+
 <Steps>
 <Step>Install dependencies</Step>
 
 ```bash
-npm install framer-motion lucide-react
+npm install motion lucide-react
 ```
 
 <Step>Run the following command</Step>

content/docs/background/animated-beam.mdx

@@ -8,6 +8,12 @@ author: harimanok_
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="animated-beam" />
+
+### Manual
+
 <Steps>
 
 <Step>Add to your CSS</Step>

content/docs/background/blurry-blob.mdx

@@ -8,6 +8,12 @@ author: ll4xmii
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="blurry-blob" />
+
+### Manual
+
 <Steps>
 <Step>Add to your CSS</Step>
 ```css

content/docs/background/diagonal-lines.mdx

@@ -8,6 +8,12 @@ author: harimanok_
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="diagonal-lines" />
+
+### Manual
+
 <Steps>
 <Step>Run the following command</Step>
 

content/docs/background/dot.mdx

@@ -8,6 +8,12 @@ author: harimanok_
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="dot" />
+
+### Manual
+
 <Steps>
 <Step>Run the following command</Step>
 

content/docs/background/grid.mdx

@@ -8,6 +8,12 @@ author: harimanok_
 
 ## Installation
 
+### CLI
+
+<RegistryInstall category="background" name="grid" />
+
+### Manual
+
 <Steps>
 <Step>Run the following command</Step>