diff --git a/apps/www/components/copy-button.tsx b/apps/www/components/copy-button.tsx
index d7c4ef263a5..5a2c7747888 100644
--- a/apps/www/components/copy-button.tsx
+++ b/apps/www/components/copy-button.tsx
@@ -151,7 +151,7 @@ export function CopyNpmCommandButton({
   }, [hasCopied])
 
   const copyCommand = React.useCallback(
-    (value: string, pm: "npm" | "pnpm" | "yarn") => {
+    (value: string, pm: "npm" | "pnpm" | "yarn" | "bun") => {
       copyToClipboardWithMeta(value, {
         name: "copy_npm_command",
         properties: {
@@ -199,6 +199,11 @@ export function CopyNpmCommandButton({
         >
           pnpm
         </DropdownMenuItem>
+        <DropdownMenuItem
+          onClick={() => copyCommand(commands.__bunCommand__, "bun")}
+        >
+          bun
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   )
diff --git a/apps/www/components/mdx-components.tsx b/apps/www/components/mdx-components.tsx
index c8495d80f3d..934e7139d4f 100644
--- a/apps/www/components/mdx-components.tsx
+++ b/apps/www/components/mdx-components.tsx
@@ -170,8 +170,9 @@ const components = {
     className,
     __rawString__,
     __npmCommand__,
-    __pnpmCommand__,
     __yarnCommand__,
+    __pnpmCommand__,
+    __bunCommand__,
     __withMeta__,
     __src__,
     __event__,
@@ -201,16 +202,20 @@ const components = {
             className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
           />
         )}
-        {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && (
-          <CopyNpmCommandButton
-            commands={{
-              __npmCommand__,
-              __pnpmCommand__,
-              __yarnCommand__,
-            }}
-            className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
-          />
-        )}
+        {__npmCommand__ &&
+          __yarnCommand__ &&
+          __pnpmCommand__ &&
+          __bunCommand__ && (
+            <CopyNpmCommandButton
+              commands={{
+                __npmCommand__,
+                __yarnCommand__,
+                __pnpmCommand__,
+                __bunCommand__,
+              }}
+              className={cn("absolute right-4 top-4", __withMeta__ && "top-16")}
+            />
+          )}
       </StyleWrapper>
     )
   },
diff --git a/apps/www/lib/rehype-npm-command.ts b/apps/www/lib/rehype-npm-command.ts
index e0812bcd36a..7b11718be8c 100644
--- a/apps/www/lib/rehype-npm-command.ts
+++ b/apps/www/lib/rehype-npm-command.ts
@@ -20,6 +20,10 @@ export function rehypeNpmCommand() {
           "npm install",
           "pnpm add"
         )
+        node.properties["__bunCommand__"] = npmCommand.replace(
+          "npm install",
+          "bun add"
+        )
       }
 
       // npx create.
@@ -34,6 +38,7 @@ export function rehypeNpmCommand() {
           "npx create-",
           "pnpm create "
         )
+        node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx")
       }
 
       // npx.
@@ -48,6 +53,7 @@ export function rehypeNpmCommand() {
           "npx",
           "pnpm dlx"
         )
+        node.properties["__bunCommand__"] = npmCommand.replace("npx", "bunx")
       }
     })
   }
diff --git a/apps/www/types/unist.ts b/apps/www/types/unist.ts
index e41b690f5e9..179b447daa5 100644
--- a/apps/www/types/unist.ts
+++ b/apps/www/types/unist.ts
@@ -27,4 +27,5 @@ export interface NpmCommands {
   __npmCommand__?: string
   __yarnCommand__?: string
   __pnpmCommand__?: string
+  __bunCommand__?: string
 }