diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx
index 582168a..182639c 100644
--- a/components/CodeBlock.tsx
+++ b/components/CodeBlock.tsx
@@ -28,6 +28,7 @@ export function CodeBlock({ className, children, ...props }: ICodeBlock) {
       }, 3000);
     }
   };
+
   return (
     <div className="relative">
       <pre
diff --git a/components/ComponentInstall.tsx b/components/ComponentInstall.tsx
index 6f8bb1f..42bade3 100644
--- a/components/ComponentInstall.tsx
+++ b/components/ComponentInstall.tsx
@@ -1,12 +1,108 @@
-import { componentConfig } from "@/config";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
-import { Code } from "lucide-react";
+import React from "react";
 import { HTMLAttributes } from "react";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { Button } from "./retroui";
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {}
 
-function ComponentInstallCli({ children }: { children: React.ReactNode }) {
-  return <TabPanel>{children}</TabPanel>;
+const CopyableCommand = ({ command }: { command: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = async () => {
+    await navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 group">
+      <code className="flex-1">{command}</code>
+      <Button size="sm" onClick={copyToClipboard} title="Copy to clipboard">
+        {copied ? "Copied" : "Copy"}
+      </Button>
+    </div>
+  );
+};
+
+export function CliCommand({
+  npmCommand,
+  yarnCommand,
+  pnpmCommand,
+  bunCommand,
+}: {
+  npmCommand: string;
+  yarnCommand?: string;
+  pnpmCommand?: string;
+  bunCommand?: string;
+}) {
+  const isNpx = npmCommand.includes("npx");
+  if (isNpx) {
+    pnpmCommand = pnpmCommand ?? npmCommand.replace("npx", "pnpm dlx");
+    yarnCommand = yarnCommand ?? npmCommand.replace("npx", "yarn dlx");
+    bunCommand = bunCommand ?? npmCommand.replace("npx", "bunx");
+  } else {
+    pnpmCommand = pnpmCommand ?? npmCommand.replace("npm", "pnpm");
+    yarnCommand = yarnCommand ?? npmCommand.replace("npm install", "yarn add");
+    bunCommand = bunCommand ?? npmCommand.replace("npm", "bun");
+  }
+
+  return (
+    <TabGroup className="p-4 my-2 bg-gray-800 rounded-md text-background/90">
+      <TabList className="flex space-x-4 mb-6 text-sm">
+        <Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
+          pnpm
+        </Tab>
+        <Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
+          npm
+        </Tab>
+        <Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
+          yarn
+        </Tab>
+        <Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
+          bun
+        </Tab>
+      </TabList>
+      <TabPanels className="text-sm text-accent">
+        <TabPanel>
+          <CopyableCommand command={pnpmCommand} />
+        </TabPanel>
+        <TabPanel>
+          <CopyableCommand command={npmCommand} />
+        </TabPanel>
+        <TabPanel>
+          <CopyableCommand command={yarnCommand} />
+        </TabPanel>
+        <TabPanel>
+          <CopyableCommand command={bunCommand} />
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
+  );
+}
+
+function ComponentInstallCli({
+  npmCommand,
+  yarnCommand,
+  pnpmCommand,
+  bunCommand,
+}: {
+  npmCommand: string;
+  yarnCommand?: string;
+  pnpmCommand?: string;
+  bunCommand?: string;
+}) {
+  return (
+    <TabPanel>
+      <CliCommand
+        npmCommand={npmCommand}
+        yarnCommand={yarnCommand}
+        pnpmCommand={pnpmCommand}
+        bunCommand={bunCommand}
+      />
+    </TabPanel>
+  );
 }
 
 function ComponentInstallManual({ children }: { children: React.ReactNode }) {
diff --git a/components/MDX.tsx b/components/MDX.tsx
index e12e877..2e1ba3b 100644
--- a/components/MDX.tsx
+++ b/components/MDX.tsx
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
 import { ComponentSource } from "./ComponentSource";
 import { CodeBlock } from "./CodeBlock";
 import Link from "next/link";
-import { ComponentInstall } from "./ComponentInstall";
+import { ComponentInstall, CliCommand } from "./ComponentInstall";
 import Image from "next/image";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 
@@ -103,6 +103,7 @@ const components = (type: "doc" | "blog") => ({
   ComponentShowcase,
   ComponentSource,
   ComponentInstall,
+  CliCommand,
 });
 
 export default function MDX({
diff --git a/content/docs/components/accordion.mdx b/content/docs/components/accordion.mdx
index bb82366..6cd7c55 100644
--- a/content/docs/components/accordion.mdx
+++ b/content/docs/components/accordion.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/accordion.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/accordion.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
diff --git a/content/docs/components/alert.mdx b/content/docs/components/alert.mdx
index a17715a..b93dd38 100644
--- a/content/docs/components/alert.mdx
+++ b/content/docs/components/alert.mdx
@@ -9,11 +9,7 @@ lastUpdated: 24 Oct, 2024
 <br />
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/alert.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/alert.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
diff --git a/content/docs/components/avatar.mdx b/content/docs/components/avatar.mdx
index 6a4005a..058c7dd 100644
--- a/content/docs/components/avatar.mdx
+++ b/content/docs/components/avatar.mdx
@@ -9,11 +9,7 @@ lastUpdated: 12 Oct, 2024
 <br />
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/avatar.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/avatar.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
diff --git a/content/docs/components/badge.mdx b/content/docs/components/badge.mdx
index f7391bf..f4006f4 100644
--- a/content/docs/components/badge.mdx
+++ b/content/docs/components/badge.mdx
@@ -9,11 +9,7 @@ lastUpdated: 30 Oct, 2024
 <br />
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/badge.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/badge.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
diff --git a/content/docs/components/breadcrumb.mdx b/content/docs/components/breadcrumb.mdx
index 7b9feb1..234e475 100644
--- a/content/docs/components/breadcrumb.mdx
+++ b/content/docs/components/breadcrumb.mdx
@@ -9,11 +9,7 @@ lastUpdated: 12 May, 2025
 <br />
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/breadcrumb.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/breadcrumb.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
diff --git a/content/docs/components/button.mdx b/content/docs/components/button.mdx
index eb66b07..500f85b 100644
--- a/content/docs/components/button.mdx
+++ b/content/docs/components/button.mdx
@@ -11,11 +11,7 @@ links:
 <br />
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/button.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/button.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
diff --git a/content/docs/components/card.mdx b/content/docs/components/card.mdx
index 6b77e95..4997b32 100644
--- a/content/docs/components/card.mdx
+++ b/content/docs/components/card.mdx
@@ -11,11 +11,7 @@ lastUpdated: 20 Oct, 2024
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/card.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/card.json'" />
   <ComponentInstall.Manual>
 
 #### Copy the code 👇 into your project:
diff --git a/content/docs/components/checkbox.mdx b/content/docs/components/checkbox.mdx
index 906e2e5..ec51a80 100644
--- a/content/docs/components/checkbox.mdx
+++ b/content/docs/components/checkbox.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/checkbox.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/checkbox.json'" />
   <ComponentInstall.Manual>
   
 #### 1. Install dependencies:
diff --git a/content/docs/components/dialog.mdx b/content/docs/components/dialog.mdx
index f8c8af7..4df5949 100644
--- a/content/docs/components/dialog.mdx
+++ b/content/docs/components/dialog.mdx
@@ -14,11 +14,7 @@ links:
 ## Instalation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/dialog.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/dialog.json'" />
   <ComponentInstall.Manual>
   
 #### 1. Install dependencies:
diff --git a/content/docs/components/input.mdx b/content/docs/components/input.mdx
index 1b3a42c..8a06f58 100644
--- a/content/docs/components/input.mdx
+++ b/content/docs/components/input.mdx
@@ -11,11 +11,7 @@ lastUpdated: 04 Mar, 2024
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/input.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/input.json'" />
   <ComponentInstall.Manual>
   
 #### 1. Copy the code 👇 into your project:
diff --git a/content/docs/components/label.mdx b/content/docs/components/label.mdx
index fc8c9ab..8fbee32 100644
--- a/content/docs/components/label.mdx
+++ b/content/docs/components/label.mdx
@@ -10,11 +10,7 @@ lastUpdated: 04 Apr, 2025
 <br />
 
  <ComponentInstall>
-    <ComponentInstall.Cli>
-        ```sh
-        npx shadcn@latest add "https://retroui.dev/r/label.json"
-        ```
-    </ComponentInstall.Cli>
+    <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/label.json'" />
     <ComponentInstall.Manual>
     #### 1. Install dependencies:
 
diff --git a/content/docs/components/menu.mdx b/content/docs/components/menu.mdx
index 513ae59..cbe8898 100644
--- a/content/docs/components/menu.mdx
+++ b/content/docs/components/menu.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/menu.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/menu.json'" />
   <ComponentInstall.Manual>
 
 #### 1. Install dependencies:
diff --git a/content/docs/components/popover.mdx b/content/docs/components/popover.mdx
index 0c99b30..1067311 100644
--- a/content/docs/components/popover.mdx
+++ b/content/docs/components/popover.mdx
@@ -9,12 +9,8 @@ lastUpdated: 08 Apr, 2025
 <br />
 
 <ComponentInstall>
-    <ComponentInstall.Cli>
-        ```sh
-        npx shadcn@latest add "https://retroui.dev/r/popover.json"
-        ```
-    </ComponentInstall.Cli>
-    <ComponentInstall.Manual>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/popover.json'" />
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
diff --git a/content/docs/components/progress.mdx b/content/docs/components/progress.mdx
index f796447..ff4ed08 100644
--- a/content/docs/components/progress.mdx
+++ b/content/docs/components/progress.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/progress.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/progress.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
diff --git a/content/docs/components/radio.mdx b/content/docs/components/radio.mdx
index 5d89180..4938eae 100644
--- a/content/docs/components/radio.mdx
+++ b/content/docs/components/radio.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/radio.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/radio.json'" />
   <ComponentInstall.Manual>
 
 #### 1. Install dependencies:
diff --git a/content/docs/components/select.mdx b/content/docs/components/select.mdx
index b01e559..b533635 100644
--- a/content/docs/components/select.mdx
+++ b/content/docs/components/select.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/select.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/select.json'" />
   <ComponentInstall.Manual>
   
 #### 1. Install dependencies:
diff --git a/content/docs/components/slider.mdx b/content/docs/components/slider.mdx
index 6cdf54e..d5cbf4d 100644
--- a/content/docs/components/slider.mdx
+++ b/content/docs/components/slider.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-    npx shadcn@latest add "https://retroui.dev/r/slider.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/slider.json'" />
   <ComponentInstall.Manual>
 
 #### 1. Install dependencies:
diff --git a/content/docs/components/sonner.mdx b/content/docs/components/sonner.mdx
index 9825bca..a83268e 100644
--- a/content/docs/components/sonner.mdx
+++ b/content/docs/components/sonner.mdx
@@ -20,12 +20,8 @@ links:
 ## Installation
 
 <ComponentInstall>
-    <ComponentInstall.Cli>
-        ```sh
-        npx shadcn@latest add "https://retroui.dev/r/sonner.json"
-        ```
-    </ComponentInstall.Cli>
-    <ComponentInstall.Manual>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/sonner.json'" />
+  <ComponentInstall.Manual>
     #### 1. Install dependencies:
 
     ```sh
diff --git a/content/docs/components/switch.mdx b/content/docs/components/switch.mdx
index b0e169a..bb99424 100644
--- a/content/docs/components/switch.mdx
+++ b/content/docs/components/switch.mdx
@@ -14,11 +14,7 @@ links:
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/switch.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/switch.json'" />
   <ComponentInstall.Manual>
   
 #### 1. Install dependencies:
diff --git a/content/docs/components/text.mdx b/content/docs/components/text.mdx
index 62282e0..6030ad4 100644
--- a/content/docs/components/text.mdx
+++ b/content/docs/components/text.mdx
@@ -30,11 +30,7 @@ The `Text` component is a versatile React component that provides various headin
 ## Installation
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/text.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/text.json'" />
   <ComponentInstall.Manual>
   
 #### 1. Install dependencies:
diff --git a/content/docs/components/toggle-group.mdx b/content/docs/components/toggle-group.mdx
index e7b8035..36d48c5 100644
--- a/content/docs/components/toggle-group.mdx
+++ b/content/docs/components/toggle-group.mdx
@@ -9,12 +9,8 @@ lastUpdated: 08 Apr, 2025
 <br />
 
 <ComponentInstall>
-    <ComponentInstall.Cli>
-        ```sh
-        npx shadcn@latest add "https://retroui.dev/r/toggle-group.json"
-        ```
-    </ComponentInstall.Cli>
-    <ComponentInstall.Manual>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/toggle-group.json'" />
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
diff --git a/content/docs/components/toggle.mdx b/content/docs/components/toggle.mdx
index cfb30c6..7d361a8 100644
--- a/content/docs/components/toggle.mdx
+++ b/content/docs/components/toggle.mdx
@@ -9,12 +9,8 @@ lastUpdated: 02 Apr, 2025
 <br />
 
 <ComponentInstall>
-    <ComponentInstall.Cli>
-        ```sh
-        npx shadcn@latest add "https://retroui.dev/r/toggle.json"
-        ```
-    </ComponentInstall.Cli>
-    <ComponentInstall.Manual>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/toggle.json'" />
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
diff --git a/content/docs/components/tooltip.mdx b/content/docs/components/tooltip.mdx
index 2b9a807..851e578 100644
--- a/content/docs/components/tooltip.mdx
+++ b/content/docs/components/tooltip.mdx
@@ -12,12 +12,8 @@ links:
 <br />
 
 <ComponentInstall>
-    <ComponentInstall.Cli>
-        ```sh
-        npx shadcn@latest add "https://retroui.dev/r/tooltip.json"
-        ```
-    </ComponentInstall.Cli>
-    <ComponentInstall.Manual>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/tooltip.json'" />
+  <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
 ```sh
@@ -29,8 +25,8 @@ npm install @radix-ui/react-tooltip
 #### 2. Copy the code 👇 into your project:
 
 <ComponentSource name="tooltip" />
-    </ComponentInstall.Manual>
 
+  </ComponentInstall.Manual>
 </ComponentInstall>
 
 <br />
diff --git a/content/docs/install/nextjs.mdx b/content/docs/install/nextjs.mdx
index cd20203..a37504f 100644
--- a/content/docs/install/nextjs.mdx
+++ b/content/docs/install/nextjs.mdx
@@ -8,9 +8,7 @@ lastUpdated: 6 Mar, 2024
 
 Run the init command to create a new Next.js project or to setup an existing one:
 
-```sh
-npx shadcn@latest init
-```
+<CliCommand npmCommand="npx shadcn@latest init" />
 
 <br />
 
@@ -18,9 +16,7 @@ npx shadcn@latest init
 
 If the `libs/utils.ts` file is not present in your project, you can install it using the following command:
 
-```sh
-npx shadcn@latest add https://retroui.dev/r/utils.json
-```
+<CliCommand npmCommand="npx shadcn@latest add https://retroui.dev/r/utils.json" />
 
 <br />
 
@@ -31,11 +27,7 @@ Now you can start using RetroUI components in your project. You can install them
 <br />
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/button.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/button.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
@@ -52,6 +44,7 @@ npm install class-variance-authority
   </ComponentInstall.Manual>
 </ComponentInstall>
 
+<br />
 After installing the component in your project, you can then simply import it like this:
 
 ```tsx
@@ -63,7 +56,6 @@ export default function ButtonExample() {
 ```
 
 <br />
-<hr />
 <br />
 
 ### Optional
diff --git a/content/docs/install/vite.mdx b/content/docs/install/vite.mdx
index a57cca7..ff3351c 100644
--- a/content/docs/install/vite.mdx
+++ b/content/docs/install/vite.mdx
@@ -8,9 +8,7 @@ lastUpdated: 30 May, 2025
 
 Start by creating a new React project using vite. Select the React + TypeScript template:
 
-```sh
-npm create vite@latest
-```
+<CliCommand npmCommand="npm create vite@latest" />
 
 <br />
 
@@ -18,9 +16,7 @@ npm create vite@latest
 
 Install Tailwind CSS using the following command:
 
-```sh
-npm install tailwindcss @tailwindcss/vite
-```
+<CliCommand npmCommand="npm install tailwindcss @tailwindcss/vite" />
 
 Replace everything in src/index.css with the following:
 
@@ -82,9 +78,7 @@ Add the following code to the tsconfig.app.json file to resolve paths, for your
 
 Add the following code to the vite.config.ts so your app can resolve paths without error:
 
-```sh
-npm install -D @types/node
-```
+<CliCommand npmCommand="npm install -D @types/node" />
 
 vite.config.ts
 ```ts
@@ -109,9 +103,7 @@ export default defineConfig({
 ### 6. Install Shadcn
 Run the `shadcn init` command to setup your project:
 
-```sh
-npx shadcn@latest init
-```
+<CliCommand npmCommand="npx shadcn@latest init" />
 
 You will be asked a few questions to configure components.json. Select the option you want to use.
 
@@ -224,17 +216,11 @@ Now you can start using RetroUI components in your project. You can install them
 <br />
 
 <ComponentInstall>
-  <ComponentInstall.Cli>
-    ```sh
-npx shadcn@latest add "https://retroui.dev/r/button.json"
-    ```
-  </ComponentInstall.Cli>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/button.json'" />
   <ComponentInstall.Manual>
 #### 1. Install dependencies:
 
-```sh
-npm install class-variance-authority
-```
+<CliCommand npmCommand="npm install class-variance-authority" />
 
 <br />
 
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 9b7fd01..d022c38 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -78,6 +78,8 @@ export default makeSource({
   mdx: {
     remarkPlugins: [],
     rehypePlugins: [
+      rehypeSlug,
+
       () => (tree) => {
         visit(tree, (node: UnistNode) => {
           if (node.name === "ComponentSource" && node.attributes) {
@@ -114,8 +116,6 @@ export default makeSource({
                 ],
               }),
             );
-
-            return;
           }
 
           if (node.name === "ComponentShowcase" && node.attributes) {
@@ -153,13 +153,9 @@ export default makeSource({
                 ],
               }),
             );
-
-            return;
           }
         });
-        return null;
       },
-      rehypeSlug,
       [
         rehypePrettyCode as any,
         {
diff --git a/types/unist.d.ts b/types/unist.d.ts
index 2f01d74..b418121 100644
--- a/types/unist.d.ts
+++ b/types/unist.d.ts
@@ -10,5 +10,25 @@ export interface UnistNode extends Node {
     value: unknown;
     type?: string;
   }[];
+  properties?: {
+    __src__?: string;
+    __npmCommand__?: string;
+    __yarnCommand__?: string;
+    __pnpmCommand__?: string;
+    __bunCommand__?: string;
+    className?: string[];
+  };
   children?: UnistNode[];
 }
+
+export interface UnistTree extends Node {
+  type: "root";
+  children: UnistNode[];
+}
+
+export interface NpmCommands {
+  __npmCommand__?: string;
+  __yarnCommand__?: string;
+  __pnpmCommand__?: string;
+  __bunCommand__?: string;
+}