From 5be3da2722fc5efebb1f2c0cae33944b5605987e Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 3 Nov 2024 14:04:40 -0800
Subject: [PATCH] docs: add Bun install command

---
 README.md                   | 22 +++++++++++++---------
 docs/src/pages/index.svelte |  5 +++++
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index b108ebe2..c6c6f550 100644
--- a/README.md
+++ b/README.md
@@ -28,17 +28,18 @@ Other forms of documentation are auto-generated:
 
 ## Installation
 
-Install `carbon-components-svelte` as a development dependency.
-
 ```sh
-# Yarn
-yarn add carbon-components-svelte
-
 # npm
 npm i carbon-components-svelte
 
 # pnpm
 pnpm i carbon-components-svelte
+
+# Yarn
+yarn add carbon-components-svelte
+
+# Bun
+bun add carbon-components-svelte
 ```
 
 ## Usage
@@ -146,17 +147,20 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
 [carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
 
 > [!NOTE]
-> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library.
+> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
 
 ```sh
-# Yarn
-yarn add -D carbon-preprocess-svelte
-
 # npm
 npm i -D carbon-preprocess-svelte
 
 # pnpm
 pnpm i -D carbon-preprocess-svelte
+
+# Yarn
+yarn add -D carbon-preprocess-svelte
+
+# Bun
+bun add -D carbon-preprocess-svelte
 ```
 
 ### `optimizeImports`
diff --git a/docs/src/pages/index.svelte b/docs/src/pages/index.svelte
index 22260573..2a4ec5dc 100644
--- a/docs/src/pages/index.svelte
+++ b/docs/src/pages/index.svelte
@@ -24,6 +24,7 @@
   const installNpm = "npm i carbon-components-svelte";
   const installPnpm = "pnpm i carbon-components-svelte";
   const installYarn = "yarn add carbon-components-svelte";
+  const installBun = "bun add carbon-components-svelte";
   const themes = {
     white: "White",
     g10: "Gray 10",
@@ -88,6 +89,7 @@
           <Tab label="NPM" />
           <Tab label="pnpm" />
           <Tab label="Yarn" />
+          <Tab label="Bun" />
           <div slot="content" style="margin: 1rem -1rem">
             <TabContent>
               <CodeSnippet code="{installNpm}" />
@@ -98,6 +100,9 @@
             <TabContent>
               <CodeSnippet code="{installYarn}" />
             </TabContent>
+            <TabContent>
+              <CodeSnippet code="{installBun}" />
+            </TabContent>
           </div>
         </Tabs>
       </Column>