From 04ffbe9bbb23685c12906c1bd22a14fd48270582 Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Fri, 5 Sep 2025 11:14:15 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Refactor=20setup=20registry=20compo?=
 =?UTF-8?q?nent=20and=20update=20documentation=20for=20shadcn/ui=20integra?=
 =?UTF-8?q?tion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/svgs/copyShadcnCommand.svelte  | 20 +++++----
 .../svgs/setupShadcnRegistry.svelte           | 38 -----------------
 src/docs/shadcn-ui.md                         | 42 +++++++++++++++++++
 3 files changed, 55 insertions(+), 45 deletions(-)
 delete mode 100644 src/components/svgs/setupShadcnRegistry.svelte
 create mode 100644 src/docs/shadcn-ui.md

diff --git a/src/components/svgs/copyShadcnCommand.svelte b/src/components/svgs/copyShadcnCommand.svelte
index 06ba0bc..892d10a 100644
--- a/src/components/svgs/copyShadcnCommand.svelte
+++ b/src/components/svgs/copyShadcnCommand.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { Button } from "@/components/ui/button";
+  import { buttonVariants } from "@/components/ui/button";
   import Shadcn from "@/components/logos/shadcn.svelte";
   import SelectPkgManager from "@/components/selectPkgManager.svelte";
 
   import { pkgManager, type PackageManager } from "@/stores/pkgManager.store";
   import CodeBlock from "@/components/codeBlock.svelte";
-  import SetupShadcnRegistry from "@/components/svgs/setupShadcnRegistry.svelte";
+  import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
 
   interface Props {
     svgTitle: string;
@@ -29,11 +29,17 @@
 </script>
 
 <div class="flex items-center justify-between space-x-2">
-  <SetupShadcnRegistry>
-    <Button variant="outline" size="sm">
-      <span>Setup Registry</span>
-    </Button>
-  </SetupShadcnRegistry>
+  <a
+    href="/docs/shadcn-ui"
+    target="_blank"
+    class={buttonVariants({ variant: "outline", size: "sm" })}
+  >
+    <span>Setup Registry</span>
+    <ArrowUpRightIcon
+      size={14}
+      class="text-neutral-500 dark:text-neutral-400"
+    />
+  </a>
   <SelectPkgManager />
 </div>
 <CodeBlock code={`${shadcnCommand} @svgl/${svgFormatTitle}`} Icon={Shadcn} />
diff --git a/src/components/svgs/setupShadcnRegistry.svelte b/src/components/svgs/setupShadcnRegistry.svelte
deleted file mode 100644
index d120b99..0000000
--- a/src/components/svgs/setupShadcnRegistry.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import * as Dialog from "@/components/ui/dialog";
-  import CodeBlock from "@/components/codeBlock.svelte";
-
-  interface Props {
-    children: Snippet;
-  }
-
-  let { children }: Props = $props();
-
-  let registryCode = `
-  "registries": {
-    "@svgl": "https://svgl.app/r/{name}.json"
-  }
-`;
-</script>
-
-<Dialog.Root>
-  <Dialog.Trigger>
-    {@render children()}
-  </Dialog.Trigger>
-  <Dialog.Content class="text-sm">
-    <Dialog.Header>
-      <Dialog.Title>Setup shadcn/ui registry</Dialog.Title>
-      <Dialog.Description>
-        Use the code below to configure the @svgl registry for your project.
-      </Dialog.Description>
-    </Dialog.Header>
-    <p>
-      1. Copy and paste the code into
-      <span class="font-mono">components.json</span>:
-    </p>
-    <CodeBlock code={registryCode} />
-    <p class="mt-2">2. Then use the following command to add SVGs:</p>
-    <CodeBlock code="npx shadcn@latest add @svgl/[svg-name]" />
-  </Dialog.Content>
-</Dialog.Root>
diff --git a/src/docs/shadcn-ui.md b/src/docs/shadcn-ui.md
new file mode 100644
index 0000000..85c8d25
--- /dev/null
+++ b/src/docs/shadcn-ui.md
@@ -0,0 +1,42 @@
+---
+title: shadcn/ui Registry
+description: How to use shadcn/ui to add SVGs to your project.
+---
+
+## shadcn/ui Registry
+
+SVGL v5 support [shadcn/ui](https://ui.shadcn.com/) registry, so you can easily add SVGs to your project using their CLI. Add the registry config once and you will be able to install any SVG in `.tsx` using `npm`, `yarn`, `bun` or `pnpm`.
+
+## Add registry
+
+Add the SVGL registry to your `components.json` file:
+
+```json
+{
+  "registries": {
+    "@svgl": "https://svgl.app/r/{name}.json"
+  }
+}
+```
+
+[shadcn/ui Namespaces](https://ui.shadcn.com/docs/registry/namespace) documentation.
+
+## Usage
+
+Add SVGs using the [shadcn/ui CLI](https://ui.shadcn.com/docs/cli/installation):
+
+```bash
+npx shadcn@latest add @svgl/sanity
+# or
+pnpm dlx shadcn@latest add @svgl/sanity
+# or
+yarn dlx shadcn@latest add @svgl/sanity
+# or
+bunx shadcn@latest add @svgl/sanity
+```
+
+Add multiple SVGs at once:
+
+```bash
+pnpm dlx shadcn@latest add @svgl/sanity @svgl/github @svgl/supabase @svgl/vercel
+```