✨ Refactor setup registry component and update documentation for shadcn/ui integration

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>
+  <a
-    <Button variant="outline" size="sm">
+    href="/docs/shadcn-ui"
-      <span>Setup Registry</span>
+    target="_blank"
-    </Button>
+    class={buttonVariants({ variant: "outline", size: "sm" })}
-  </SetupShadcnRegistry>
+  >
+    <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} />

src/components/svgs/setupShadcnRegistry.svelte

@@ -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>

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
+```