diff --git a/sites/docs/mdsx.config.js b/sites/docs/mdsx.config.js
index e9827acf7..4013ed049 100644
--- a/sites/docs/mdsx.config.js
+++ b/sites/docs/mdsx.config.js
@@ -169,7 +169,7 @@ export function rehypeComponentExample() {
 
 				try {
 					for (const style of styles) {
-						// @ts-expect-error - this is fine for now.
+						// @ts-expect-error - this is fine
 						const component = Index[style.name][name];
 						const src = component.files[0].replace("/lib/", "/src/lib/");
 						let sourceCode = getComponentSourceFileContent(src);
diff --git a/sites/docs/src/content/cli.md b/sites/docs/src/content/cli.md
index 50d78eb8b..c87170669 100644
--- a/sites/docs/src/content/cli.md
+++ b/sites/docs/src/content/cli.md
@@ -3,15 +3,17 @@ title: CLI
 description: Use the CLI to add components to your project.
 ---
 
+<script>
+	import { PMExecute } from '$lib/components/docs'
+</script>
+
 ## init
 
 Use the `init` command to initialize dependencies for a new project.
 
 The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.cjs`, and creates CSS variables for the project.
 
-```bash
-npx shadcn-svelte@latest init
-```
+<PMExecute command="shadcn-svelte@latest init" />
 
 You will be asked a few questions to configure `components.json`:
 
@@ -47,9 +49,7 @@ Options:
 
 Use the `add` command to add components and dependencies to your project.
 
-```bash
-npx shadcn-svelte@latest add [component]
-```
+<PMExecute command="shadcn-svelte@latest add [component]" />
 
 You will be presented with a list of components to choose from:
 
@@ -93,9 +93,7 @@ Options:
 
 Use the `update` command to update components in your project. This will overwrite any modifications you've made to the components, so be sure to commit your changes before running this command.
 
-```bash
-npx shadcn-svelte@latest update [component]
-```
+<PMExecute command="shadcn-svelte@latest update [component]" />
 
 ### Options
 
diff --git a/sites/docs/src/content/components-json.md b/sites/docs/src/content/components-json.md
index c879c1f59..9ec6bee39 100644
--- a/sites/docs/src/content/components-json.md
+++ b/sites/docs/src/content/components-json.md
@@ -4,7 +4,7 @@ description: Configuration for your project.
 ---
 
 <script>
-    import { Callout, ComponentPreview } from '$lib/components/docs'
+    import { Callout, ComponentPreview, PMExecute } from '$lib/components/docs'
 </script>
 
 The `components.json` file holds configuration for your project.
@@ -19,9 +19,7 @@ We use it to understand how your project is set up and how to generate component
 
 You can create a `components.json` file in your project by running the following command:
 
-```bash
-npx shadcn-svelte@latest init
-```
+<PMExecute command="shadcn-svelte@latest init" />
 
 See the [CLI section](/docs/cli) for more information.
 
diff --git a/sites/docs/src/content/components/accordion.md b/sites/docs/src/content/components/accordion.md
index f5c4db7d2..0cabb0be7 100644
--- a/sites/docs/src/content/components/accordion.md
+++ b/sites/docs/src/content/components/accordion.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/accordion
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="accordion-demo" class="[&_[data-melt-accordion]]:sm:max-w-[70%]">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/accordion
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add accordion
-```
+<PMAddComp name="accordion" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/alert-dialog.md b/sites/docs/src/content/components/alert-dialog.md
index fd12345d5..b6e599bfa 100644
--- a/sites/docs/src/content/components/alert-dialog.md
+++ b/sites/docs/src/content/components/alert-dialog.md
@@ -8,7 +8,7 @@ bits: https://www.bits-ui.com/docs/components/alert-dialog
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="alert-dialog-demo">
@@ -19,17 +19,13 @@ bits: https://www.bits-ui.com/docs/components/alert-dialog
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add alert-dialog
-```
+<PMAddComp name="alert-dialog" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/alert.md b/sites/docs/src/content/components/alert.md
index 40d4e9ce1..c0e6dd68f 100644
--- a/sites/docs/src/content/components/alert.md
+++ b/sites/docs/src/content/components/alert.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="alert-demo">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add alert
-```
+<PMAddComp name="alert" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/aspect-ratio.md b/sites/docs/src/content/components/aspect-ratio.md
index f58d47b59..56b659201 100644
--- a/sites/docs/src/content/components/aspect-ratio.md
+++ b/sites/docs/src/content/components/aspect-ratio.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/aspect-ratio
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="aspect-ratio-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/aspect-ratio
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add aspect-ratio
-```
+<PMAddComp name="aspect-ratio" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/avatar.md b/sites/docs/src/content/components/avatar.md
index e0e764aa5..c29c5f06b 100644
--- a/sites/docs/src/content/components/avatar.md
+++ b/sites/docs/src/content/components/avatar.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/avatar
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="avatar-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/avatar
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add avatar
-```
+<PMAddComp name="avatar" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/badge.md b/sites/docs/src/content/components/badge.md
index 5b6fcd57d..cd041ce5c 100644
--- a/sites/docs/src/content/components/badge.md
+++ b/sites/docs/src/content/components/badge.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
   import { BadgeDemo, BadgeDestructive, BadgeOutline, BadgeSecondary } from '$lib/registry/default/example'
 </script>
 
@@ -18,9 +18,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add badge
-```
+<PMAddComp name="badge" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/breadcrumb.md b/sites/docs/src/content/components/breadcrumb.md
index 30937e31e..c6bca6654 100644
--- a/sites/docs/src/content/components/breadcrumb.md
+++ b/sites/docs/src/content/components/breadcrumb.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="breadcrumb-demo">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add breadcrumb
-```
+<PMAddComp name="breadcrumb" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/button.md b/sites/docs/src/content/components/button.md
index 0bbfa43cd..451c9f579 100644
--- a/sites/docs/src/content/components/button.md
+++ b/sites/docs/src/content/components/button.md
@@ -8,7 +8,7 @@ bits: https://www.bits-ui.com/docs/components/button
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="button-demo">
@@ -19,17 +19,13 @@ bits: https://www.bits-ui.com/docs/components/button
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add button
-```
+<PMAddComp name="button" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/calendar.md b/sites/docs/src/content/components/calendar.md
index 7679e0449..41cc8acdd 100644
--- a/sites/docs/src/content/components/calendar.md
+++ b/sites/docs/src/content/components/calendar.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/calendar
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall, Callout } from '$lib/components/docs';
+    import { ComponentPreview, ManualInstall, Callout, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="calendar-demo">
@@ -24,17 +24,13 @@ If you're looking for a range calendar, check out the [Range Calendar](/docs/com
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add calendar
-```
+<PMAddComp name="calendar" />
 
 <ManualInstall>
 
 1. Install `bits-ui` and `@internationalized/date`:
 
-```bash
-npm install bits-ui @internationalized/date
-```
+<PMInstall command="bits-ui @internationalized/date" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/card.md b/sites/docs/src/content/components/card.md
index 960216c88..d28ba495f 100644
--- a/sites/docs/src/content/components/card.md
+++ b/sites/docs/src/content/components/card.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="card-with-form">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add card
-```
+<PMAddComp name="card" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/carousel.md b/sites/docs/src/content/components/carousel.md
index 99b7299fa..f65b35a5e 100644
--- a/sites/docs/src/content/components/carousel.md
+++ b/sites/docs/src/content/components/carousel.md
@@ -7,7 +7,7 @@ bits: https://www.embla-carousel.com/get-started/svelte/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="carousel-demo">
@@ -22,17 +22,13 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add carousel
-```
+<PMAddComp name="carousel" />
 
 <ManualInstall>
 
 1. Install `embla-carousel-svelte`:
 
-```bash
-npm install embla-carousel-svelte -D
-```
+<PMInstall command="embla-carousel-svelte -D" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/checkbox.md b/sites/docs/src/content/components/checkbox.md
index f2afe1b4a..e38544e6a 100644
--- a/sites/docs/src/content/components/checkbox.md
+++ b/sites/docs/src/content/components/checkbox.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/checkbox
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="checkbox-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/checkbox
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add checkbox
-```
+<PMAddComp name="checkbox" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/collapsible.md b/sites/docs/src/content/components/collapsible.md
index 5fcfb486e..a37ec324e 100644
--- a/sites/docs/src/content/components/collapsible.md
+++ b/sites/docs/src/content/components/collapsible.md
@@ -8,7 +8,7 @@ bits: https://www.bits-ui.com/docs/components/collapsible
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="collapsible-demo">
@@ -19,17 +19,13 @@ bits: https://www.bits-ui.com/docs/components/collapsible
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add collapsible
-```
+<PMAddComp name="collapsible" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/command.md b/sites/docs/src/content/components/command.md
index 0709d55c1..b65769238 100644
--- a/sites/docs/src/content/components/command.md
+++ b/sites/docs/src/content/components/command.md
@@ -7,7 +7,7 @@ bits: https://github.com/huntabyte/cmdk-sv
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall, Callout } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, Callout, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="command-demo" align="start" >
@@ -28,17 +28,13 @@ The `<Command />` component uses the [`cmdk-sv`](https://cmdk-sv.com) library to
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add command
-```
+<PMAddComp name="command" />
 
 <ManualInstall>
 
-1. Install `cmdk-sv`:
+1. Install `cmdk-sv` and `bits-ui`:
 
-```bash
-npm install cmdk-sv bits-ui
-```
+<PMInstall command="cmdk-sv bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/context-menu.md b/sites/docs/src/content/components/context-menu.md
index 1f858162f..6c3bc2d69 100644
--- a/sites/docs/src/content/components/context-menu.md
+++ b/sites/docs/src/content/components/context-menu.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/context-menu
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs'
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'
 </script>
 
 <ComponentPreview name="context-menu-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/context-menu
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add context-menu
-```
+<PMAddComp name="context-menu" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/data-table.md b/sites/docs/src/content/components/data-table.md
index b4b223c61..66da6088a 100644
--- a/sites/docs/src/content/components/data-table.md
+++ b/sites/docs/src/content/components/data-table.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall, Callout, Steps } from '$lib/components/docs'
+    import { ComponentPreview, ManualInstall, Callout, Steps, PMAddComp, PMInstall } from '$lib/components/docs'
 </script>
 
 <ComponentPreview name="data-table-demo">
@@ -46,15 +46,11 @@ This guide will show you how to use [Svelte Headless Table](https://svelte-headl
 
 1. Add the `<Table />` component to your project:
 
-```bash
-npx shadcn-svelte@latest add table
-```
+<PMAddComp name="table" />
 
 2. Add `svelte-headless-table` as a dependency:
 
-```bash
-npm install -D svelte-headless-table
-```
+<PMInstall command="svelte-headless-table" />
 
 ## Prerequisites
 
diff --git a/sites/docs/src/content/components/dialog.md b/sites/docs/src/content/components/dialog.md
index 0d65ec5f7..f1f966e7f 100644
--- a/sites/docs/src/content/components/dialog.md
+++ b/sites/docs/src/content/components/dialog.md
@@ -8,7 +8,7 @@ bits: https://www.bits-ui.com/docs/components/dialog
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="dialog-demo">
@@ -19,17 +19,13 @@ bits: https://www.bits-ui.com/docs/components/dialog
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add dialog
-```
+<PMAddComp name="dialog" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/drawer.md b/sites/docs/src/content/components/drawer.md
index d7603bea0..8638c5dac 100644
--- a/sites/docs/src/content/components/drawer.md
+++ b/sites/docs/src/content/components/drawer.md
@@ -7,7 +7,7 @@ bits: https://www.vaul-svelte.com
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs'
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'
 </script>
 
 <ComponentPreview name="drawer-demo">
@@ -22,17 +22,13 @@ Drawer is built on top of [Vaul Svelte](https://vaul-svelte.com), which is a Sve
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add drawer
-```
+<PMAddComp name="drawer" />
 
 <ManualInstall>
 
 1. Install `vaul-svelte`:
 
-```bash
-npm install vaul-svelte
-```
+<PMInstall command="vaul-svelte" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/dropdown-menu.md b/sites/docs/src/content/components/dropdown-menu.md
index 71e6f4101..5a69f8b35 100644
--- a/sites/docs/src/content/components/dropdown-menu.md
+++ b/sites/docs/src/content/components/dropdown-menu.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/dropdown-menu
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs'
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'
 </script>
 
 <ComponentPreview name="dropdown-menu-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/dropdown-menu
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add dropdown-menu
-```
+<PMAddComp name="dropdown-menu" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/form.md b/sites/docs/src/content/components/form.md
index 7a749eb08..e680b3a55 100644
--- a/sites/docs/src/content/components/form.md
+++ b/sites/docs/src/content/components/form.md
@@ -4,7 +4,7 @@ description: Building forms with Formsnap, Superforms, & Zod.
 ---
 
 <script>
- 	import { Steps, ComponentPreview, FormPreview } from '$lib/components/docs';
+ 	import { Steps, ComponentPreview, FormPreview, PMAddComp, PMInstall } from '$lib/components/docs';
 
 	export let form;
 </script>
@@ -65,9 +65,7 @@ If you aren't familiar with [Superforms](https://superforms.rocks) & [Formsnap](
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add form
-```
+<PMAddComp name="form" />
 
 ## Usage
 
diff --git a/sites/docs/src/content/components/hover-card.md b/sites/docs/src/content/components/hover-card.md
index 271b297ac..6e7b913b0 100644
--- a/sites/docs/src/content/components/hover-card.md
+++ b/sites/docs/src/content/components/hover-card.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/link-preview
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="hover-card-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/link-preview
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add hover-card
-```
+<PMAddComp name="hover-card" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/input.md b/sites/docs/src/content/components/input.md
index 23cffa8f3..6c7caf42e 100644
--- a/sites/docs/src/content/components/input.md
+++ b/sites/docs/src/content/components/input.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp} from '$lib/components/docs';
 
   export let form;
 </script>
@@ -19,9 +19,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add input
-```
+<PMAddComp name="input" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/label.md b/sites/docs/src/content/components/label.md
index c31454fed..8ecdd3921 100644
--- a/sites/docs/src/content/components/label.md
+++ b/sites/docs/src/content/components/label.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/label
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="label-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/label
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add label
-```
+<PMAddComp name="label" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/menubar.md b/sites/docs/src/content/components/menubar.md
index 0ea00eb30..051e70407 100644
--- a/sites/docs/src/content/components/menubar.md
+++ b/sites/docs/src/content/components/menubar.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/menubar
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs'
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'
 </script>
 
 <ComponentPreview name="menubar-demo">
@@ -16,17 +16,13 @@ bits: https://www.bits-ui.com/docs/components/menubar
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add menubar
-```
+<PMAddComp name="menubar" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/pagination.md b/sites/docs/src/content/components/pagination.md
index eaf66c22b..c6112e4af 100644
--- a/sites/docs/src/content/components/pagination.md
+++ b/sites/docs/src/content/components/pagination.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/pagination
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="pagination-demo" >
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/pagination
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add pagination
-```
+<PMAddComp name="pagination" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/popover.md b/sites/docs/src/content/components/popover.md
index 316f79135..f0dc546f1 100644
--- a/sites/docs/src/content/components/popover.md
+++ b/sites/docs/src/content/components/popover.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/popover
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="popover-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/popover
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add popover
-```
+<PMAddComp name="popover" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/progress.md b/sites/docs/src/content/components/progress.md
index aa9851912..7fc30827f 100644
--- a/sites/docs/src/content/components/progress.md
+++ b/sites/docs/src/content/components/progress.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/progress
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="progress-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/progress
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add progress
-```
+<PMAddComp name="progress" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/radio-group.md b/sites/docs/src/content/components/radio-group.md
index 6f22028d8..1320eb169 100644
--- a/sites/docs/src/content/components/radio-group.md
+++ b/sites/docs/src/content/components/radio-group.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/radio-group
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="radio-group-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/radio-group
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add radio-group
-```
+<PMAddComp name="radio-group" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/range-calendar.md b/sites/docs/src/content/components/range-calendar.md
index d5a19667b..6d2a08977 100644
--- a/sites/docs/src/content/components/range-calendar.md
+++ b/sites/docs/src/content/components/range-calendar.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/range-calendar
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="range-calendar-demo">
@@ -22,17 +22,13 @@ The `<RangeCalendar />` component is built on top of the [Bits Range Calendar](h
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add range-calendar
-```
+<PMAddComp name="range-calendar" />
 
 <ManualInstall>
 
 1. Install `bits-ui` and `@internationalized/date`:
 
-```bash
-npm install bits-ui @internationalized/date
-```
+<PMInstall command="bits-ui @internationalized/date" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/resizable.md b/sites/docs/src/content/components/resizable.md
index de9d59e15..19ce9eedb 100644
--- a/sites/docs/src/content/components/resizable.md
+++ b/sites/docs/src/content/components/resizable.md
@@ -7,7 +7,7 @@ bits: https://paneforge.com
 ---
 
 <script>
-	import { ComponentPreview, ManualInstall } from '$lib/components/docs'
+	import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'
 </script>
 
 <ComponentPreview name="resizable-demo">
@@ -22,17 +22,13 @@ The `Resizable` component is built on top of [PaneForge](https://github.com/svec
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add resizable
-```
+<PMAddComp name="resizable" />
 
 <ManualInstall>
 
 1. Install `paneforge`:
 
-```bash
-npm install paneforge
-```
+<PMInstall command="paneforge" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/scroll-area.md b/sites/docs/src/content/components/scroll-area.md
index 9c1a4f588..f958432d0 100644
--- a/sites/docs/src/content/components/scroll-area.md
+++ b/sites/docs/src/content/components/scroll-area.md
@@ -7,7 +7,7 @@ bits: https://bits-ui.com/docs/components/scroll-area
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="scroll-area-demo">
@@ -18,13 +18,15 @@ bits: https://bits-ui.com/docs/components/scroll-area
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add scroll-area
-```
+<PMAddComp name="scroll-area" />
 
 <ManualInstall>
 
-1. Copy and paste the component source files linked at the top of this page into your project.
+1. Install `bits-ui`:
+
+<PMInstall command="bits-ui" />
+
+2. Copy and paste the component source files linked at the top of this page into your project.
 
 </ManualInstall>
 
diff --git a/sites/docs/src/content/components/select.md b/sites/docs/src/content/components/select.md
index fb74b3244..c5f17146d 100644
--- a/sites/docs/src/content/components/select.md
+++ b/sites/docs/src/content/components/select.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/select
 ---
 
 <script>
-    import { ComponentPreview, ManualInstall } from '$lib/components/docs'
+    import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs'
 </script>
 
 <ComponentPreview name="select-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/select
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add select
-```
+<PMAddComp name="select" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/separator.md b/sites/docs/src/content/components/separator.md
index 35bcac40f..91ce73941 100644
--- a/sites/docs/src/content/components/separator.md
+++ b/sites/docs/src/content/components/separator.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/separator
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="separator-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/separator
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add separator
-```
+<PMAddComp name="separator" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/sheet.md b/sites/docs/src/content/components/sheet.md
index 10684debe..9e92009fe 100644
--- a/sites/docs/src/content/components/sheet.md
+++ b/sites/docs/src/content/components/sheet.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/dialog
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="sheet-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/dialog
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add sheet
-```
+<PMAddComp name="sheet" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/skeleton.md b/sites/docs/src/content/components/skeleton.md
index b263af90f..2d055fd98 100644
--- a/sites/docs/src/content/components/skeleton.md
+++ b/sites/docs/src/content/components/skeleton.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="skeleton-demo">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add skeleton
-```
+<PMAddComp name="skeleton" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/slider.md b/sites/docs/src/content/components/slider.md
index c6d0b968a..4dc198755 100644
--- a/sites/docs/src/content/components/slider.md
+++ b/sites/docs/src/content/components/slider.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/slider
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="slider-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/slider
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add slider
-```
+<PMAddComp name="slider" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/sonner.md b/sites/docs/src/content/components/sonner.md
index 78bb7f2e1..4fc8ecc74 100644
--- a/sites/docs/src/content/components/sonner.md
+++ b/sites/docs/src/content/components/sonner.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall, Steps, Step } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, Steps, Step, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="sonner-demo">
@@ -37,9 +37,7 @@ If you wish to opt out of Dark Mode support, you can uninstall `mode-watcher` an
 	Run the following command:
 </Step>
 
-```bash
-npx shadcn-svelte@latest add sonner
-```
+<PMAddComp name="sonner" />
 
 <Step>
 	Add the Toaster component
@@ -63,9 +61,7 @@ Note: Make sure you are adding the import from the path `"$lib/components/ui/son
 
 1. Install `svelte-sonner`:
 
-```bash
-npm install svelte-sonner
-```
+<PMInstall command="svelte-sonner" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/switch.md b/sites/docs/src/content/components/switch.md
index 8f50bfdf0..83a2aba41 100644
--- a/sites/docs/src/content/components/switch.md
+++ b/sites/docs/src/content/components/switch.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/switch
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="switch-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/switch
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add switch
-```
+<PMAddComp name="switch" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/table.md b/sites/docs/src/content/components/table.md
index 61efc4b2c..253780fd4 100644
--- a/sites/docs/src/content/components/table.md
+++ b/sites/docs/src/content/components/table.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="table-demo">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add table
-```
+<PMAddComp name="table" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/tabs.md b/sites/docs/src/content/components/tabs.md
index 321062078..40b55d0cc 100644
--- a/sites/docs/src/content/components/tabs.md
+++ b/sites/docs/src/content/components/tabs.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/tabs
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="tabs-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/tabs
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add tabs
-```
+<PMAddComp name="tabs" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/textarea.md b/sites/docs/src/content/components/textarea.md
index 5199df0cb..ade6ed667 100644
--- a/sites/docs/src/content/components/textarea.md
+++ b/sites/docs/src/content/components/textarea.md
@@ -6,7 +6,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="textarea-demo">
@@ -17,9 +17,7 @@ source: https://github.com/huntabyte/shadcn-svelte/tree/main/sites/docs/src/lib/
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add textarea
-```
+<PMAddComp name="textarea" />
 
 <ManualInstall>
 
diff --git a/sites/docs/src/content/components/toggle-group.md b/sites/docs/src/content/components/toggle-group.md
index c1c6d0a94..5d64d91ac 100644
--- a/sites/docs/src/content/components/toggle-group.md
+++ b/sites/docs/src/content/components/toggle-group.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/toggle-group
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="toggle-group-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/toggle-group
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add toggle-group
-```
+<PMAddComp name="toggle-group" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/toggle.md b/sites/docs/src/content/components/toggle.md
index 608339870..ada2a202b 100644
--- a/sites/docs/src/content/components/toggle.md
+++ b/sites/docs/src/content/components/toggle.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/toggle
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="toggle-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/toggle
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add toggle
-```
+<PMAddComp name="toggle" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/components/tooltip.md b/sites/docs/src/content/components/tooltip.md
index eeaba7c7a..3d0dd567c 100644
--- a/sites/docs/src/content/components/tooltip.md
+++ b/sites/docs/src/content/components/tooltip.md
@@ -7,7 +7,7 @@ bits: https://www.bits-ui.com/docs/components/tooltip
 ---
 
 <script>
-  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+  import { ComponentPreview, ManualInstall, PMAddComp, PMInstall } from '$lib/components/docs';
 </script>
 
 <ComponentPreview name="tooltip-demo">
@@ -18,17 +18,13 @@ bits: https://www.bits-ui.com/docs/components/tooltip
 
 ## Installation
 
-```bash
-npx shadcn-svelte@latest add tooltip
-```
+<PMAddComp name="tooltip" />
 
 <ManualInstall>
 
 1. Install `bits-ui`:
 
-```bash
-npm install bits-ui
-```
+<PMInstall command="bits-ui" />
 
 2. Copy and paste the component source files linked at the top of this page into your project.
 
diff --git a/sites/docs/src/content/dark-mode/astro.md b/sites/docs/src/content/dark-mode/astro.md
index b16e52331..1273d70d1 100644
--- a/sites/docs/src/content/dark-mode/astro.md
+++ b/sites/docs/src/content/dark-mode/astro.md
@@ -4,7 +4,7 @@ description: Adding dark mode to your Astro site.
 ---
 
 <script>
-  import { Steps, ComponentPreview } from "$lib/components/docs";
+  import { Steps, ComponentPreview, PMInstall } from "$lib/components/docs";
 </script>
 
 Just like in regular Svelte, we use the `class` strategy from Tailwind CSS to support dark mode toggling. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) for more information.
@@ -58,9 +58,7 @@ import "$lib/styles/app.css";
 
 ### Install mode-watcher
 
-```bash
-npm install mode-watcher
-```
+<PMInstall command="mode-watcher" />
 
 ### Add the ModeWatcher component
 
diff --git a/sites/docs/src/content/dark-mode/svelte.md b/sites/docs/src/content/dark-mode/svelte.md
index 53ce04d23..2579aaec1 100644
--- a/sites/docs/src/content/dark-mode/svelte.md
+++ b/sites/docs/src/content/dark-mode/svelte.md
@@ -4,7 +4,7 @@ description: Adding dark mode to your Svelte site.
 ---
 
 <script>
-  import { Steps, ComponentPreview } from "$lib/components/docs";
+  import { Steps, ComponentPreview, PMInstall } from "$lib/components/docs";
 </script>
 
 We use the `class` strategy from Tailwind CSS to support dark mode toggling. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) for more information.
@@ -19,9 +19,7 @@ How you add the ` dark` class to the `html` element is up to you. In this guide,
 
 Start by installing `mode-watcher`:
 
-```bash
-npm install mode-watcher
-```
+<PMInstall command="mode-watcher" />
 
 ### Add the ModeWatcher component
 
diff --git a/sites/docs/src/content/installation/astro.md b/sites/docs/src/content/installation/astro.md
index ad1ed70c8..1540acce5 100644
--- a/sites/docs/src/content/installation/astro.md
+++ b/sites/docs/src/content/installation/astro.md
@@ -5,8 +5,7 @@ description: How to setup shadcn-svelte in an Astro project.
 
 <script>
   import { Alert, AlertDescription } from "$lib/registry/new-york/ui/alert";
-  import { Callout } from "$lib/components/docs";
-  import { Steps } from "$lib/components/docs";
+  import { Steps, Callout, PMCreate, PMExecute, PMInstall, PMAddComp } from "$lib/components/docs";
 </script>
 
 ## Setup your project
@@ -17,9 +16,7 @@ description: How to setup shadcn-svelte in an Astro project.
 
 Start by creating a new Astro project:
 
-```bash
-npm create astro@latest
-```
+<PMCreate command="astro@latest" />
 
 ### Configure your Astro project
 
@@ -44,9 +41,7 @@ Yes/No
 
 Install Svelte using the Astro CLI:
 
-```bash
-npx astro add svelte
-```
+<PMExecute command="astro add svelte" />
 
 <Callout className="mt-4">
 
@@ -58,9 +53,7 @@ Answer `Yes` to all the question prompted by the CLI when installing Svelte.
 
 Add Tailwind CSS using the Astro CLI:
 
-```bash
-npx astro add tailwind
-```
+<PMExecute command="astro add tailwind" />
 
 <Callout className="mt-4">
 
@@ -115,9 +108,7 @@ import "$lib/styles/app.css";
 
 Run the `shadcn-svelte` init command to setup your project:
 
-```bash
-npx shadcn-svelte@latest init
-```
+<PMExecute command="shadcn-svelte@latest init" />
 
 ### Configure components.json
 
@@ -165,9 +156,7 @@ export default config;
 
 You can now start adding components to your project.
 
-```bash
-npx shadcn-svelte@latest add button
-```
+<PMAddComp name="button" />
 
 The command above will add the `Button` component to your project. You can then import it like this:
 
diff --git a/sites/docs/src/content/installation/manual.md b/sites/docs/src/content/installation/manual.md
index 60a4b8fa2..3135fec6e 100644
--- a/sites/docs/src/content/installation/manual.md
+++ b/sites/docs/src/content/installation/manual.md
@@ -4,7 +4,7 @@ description: How to setup shadcn-svelte manually.
 ---
 
 <script>
-	import { Steps, Step } from '$lib/components/docs'
+	import { Steps, Step, PMAddComp, PMInstall, PMExecute } from '$lib/components/docs'
 </script>
 
 ## Setup your project
@@ -15,31 +15,23 @@ description: How to setup shadcn-svelte manually.
 
 Use the `svelte-add` CLI to add Tailwind CSS to your project.
 
-```bash
-npx svelte-add@latest tailwindcss
-```
+<PMExecute command="svelte-add@latest tailwindcss" />
 
 ### Add dependencies
 
 Add the following dependencies to your project:
 
-```bash
-npm install tailwind-variants clsx tailwind-merge
-```
+<PMInstall command="tailwind-variants clsx tailwind-merge" />
 
 ### Add icon library
 
 If you're using the `default` style, install `lucide-svelte`:
 
-```bash
-npm install lucide-svelte
-```
+<PMInstall command="lucide-svelte" />
 
 If you're using the `new-york` style, install `svelte-radix`:
 
-```bash
-npm install svelte-radix
-```
+<PMInstall command="svelte-radix" />
 
 ### Configure path aliases
 
@@ -340,4 +332,6 @@ Create `src/routes/+layout.svelte` and import the styles:
 
 You can now start adding components to your project.
 
+<PMAddComp name="button" />
+
 </Steps>
diff --git a/sites/docs/src/content/installation/sveltekit.md b/sites/docs/src/content/installation/sveltekit.md
index 25c8f5604..e21859d2d 100644
--- a/sites/docs/src/content/installation/sveltekit.md
+++ b/sites/docs/src/content/installation/sveltekit.md
@@ -5,7 +5,7 @@ description: How to setup shadcn-svelte in a SvelteKit project.
 
 <script>
   import { Alert, AlertDescription } from "$lib/registry/new-york/ui/alert";
-  import { Steps } from "$lib/components/docs";
+  import { Steps, PMCreate, PMExecute, PMInstall, PMAddComp } from "$lib/components/docs";
 </script>
 
 ## Setup your project
@@ -16,23 +16,17 @@ description: How to setup shadcn-svelte in a SvelteKit project.
 
 Use the SvelteKit CLI to create a new project.
 
-```bash
-npm create svelte@latest my-app
-```
+<PMCreate command="svelte@latest my-app" />
 
 ### Add TailwindCSS
 
 Use the `svelte-add` CLI to add Tailwind CSS to your project.
 
-```bash
-npx svelte-add@latest tailwindcss
-```
+<PMExecute command="svelte-add@latest tailwindcss" />
 
 ### Install dependencies
 
-```bash
-npm install
-```
+<PMInstall />
 
 ### Setup path aliases
 
@@ -52,9 +46,7 @@ const config = {
 
 ### Run the CLI
 
-```bash
-npx shadcn-svelte@latest init
-```
+<PMExecute command="shadcn-svelte@latest init" />
 
 ### Configure components.json
 
@@ -74,9 +66,7 @@ Configure the import alias for utils: › $lib/utils
 
 You can now start adding components to your project.
 
-```bash
-npx shadcn-svelte@latest add button
-```
+<PMAddComp name="button" />
 
 The command above will add the `Button` component to your project. You can then import it like this:
 
diff --git a/sites/docs/src/content/installation/vite.md b/sites/docs/src/content/installation/vite.md
index 58cb0f8a5..446a3e1ce 100644
--- a/sites/docs/src/content/installation/vite.md
+++ b/sites/docs/src/content/installation/vite.md
@@ -5,7 +5,7 @@ description: How to setup shadcn-svelte in a Vite project.
 
 <script>
   import { Alert, AlertDescription } from "$lib/registry/new-york/ui/alert";
-  import { Steps } from "$lib/components/docs";
+  import { Steps, PMAddComp, PMInstall, PMExecute } from "$lib/components/docs";
 </script>
 
 ## Setup your project
@@ -16,15 +16,11 @@ description: How to setup shadcn-svelte in a Vite project.
 
 Use the `svelte-add` CLI to add Tailwind CSS to your project.
 
-```bash
-npx svelte-add@latest tailwindcss
-```
+<PMExecute command="svelte-add@latest tailwindcss" />
 
 ### Install dependencies
 
-```bash
-npm install
-```
+<PMInstall />
 
 ### Setup path aliases
 
@@ -57,9 +53,7 @@ export default defineConfig({
 
 ### Run the CLI
 
-```bash
-npx shadcn-svelte@latest init
-```
+<PMExecute command="shadcn-svelte@latest init" />
 
 ### Configure components.json
 
@@ -79,9 +73,7 @@ Configure the import alias for utils: › $lib/utils
 
 You can now start adding components to your project.
 
-```bash
-npx shadcn-svelte@latest add button
-```
+<PMAddComp name="button" />
 
 The command above will add the `Button` component to your project. You can then import it like this:
 
diff --git a/sites/docs/src/lib/components/docs/copy-button.svelte b/sites/docs/src/lib/components/docs/copy-button.svelte
index 2ae506635..290b0b253 100644
--- a/sites/docs/src/lib/components/docs/copy-button.svelte
+++ b/sites/docs/src/lib/components/docs/copy-button.svelte
@@ -1,119 +1,72 @@
 <script lang="ts">
-	import { clickToCopyAction } from "svelte-legos";
 	import Check from "svelte-radix/Check.svelte";
 	import Copy from "svelte-radix/Copy.svelte";
+	import { CaretSort } from "svelte-radix";
+	import { tick } from "svelte";
 	import { cn } from "$lib/utils.js";
+	import { getPackageManager, packageManagers } from "$lib/stores/package-manager.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
 
-	let copied = false;
-	let commands: Record<"npm" | "yarn" | "pnpm" | "bun", string> = {
-		npm: "",
-		yarn: "",
-		pnpm: "",
-		bun: "",
-	};
+	export let copied = false;
+	export let copyCode = () => {};
 	let className: string | undefined | null = undefined;
-	export let value = "";
 	export { className as class };
+	export let isPackageManagerBlock = false;
 
-	$: if (value) {
-		// npm install
-		if (value.startsWith("npm install")) {
-			commands = {
-				npm: value,
-				yarn: value.replace("npm install", "yarn add"),
-				pnpm: value.replace(/^npm/, "pnpm"),
-				bun: value.replace(/^npm/, "bun"),
-			};
-		}
-
-		// npm create
-		else if (value.startsWith("npm create")) {
-			commands = {
-				npm: value,
-				yarn: value.replace(/^npm/, "yarn"),
-				pnpm: value.replace(/^npm/, "pnpm"),
-				bun: value.replace(/^npm/, "bun"),
-			};
-		}
-
-		// npx
-		else if (value.startsWith("npx")) {
-			commands = {
-				npm: value,
-				yarn: value.replace(/^npx/, "yarn dlx"),
-				pnpm: value.replace(/^npx/, "pnpm dlx"),
-				bun: value.replace(/^npx/, "bunx"),
-			};
-		}
-	}
-
-	function handleCopyDone() {
-		copied = true;
-		setTimeout(() => {
-			copied = false;
-		}, 1000);
-	}
-
-	function handleCopyError() {
-		console.error("Error copying");
-	}
+	const selectedPackageManager = getPackageManager();
 </script>
 
-{#if Object.values(commands).filter(Boolean).length > 1}
-	<DropdownMenu.Root>
+{#if isPackageManagerBlock}
+	<DropdownMenu.Root preventScroll={false}>
 		<DropdownMenu.Trigger asChild let:builder>
 			<Button
 				builders={[builder]}
 				size="icon"
 				variant="ghost"
 				class={cn(
-					"relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50",
+					"bg-background/10 text-background/70 hover:bg-background/20 hover:text-background/80 dark:bg-foreground/5 dark:text-foreground/70 dark:hover:bg-foreground/10 dark:hover:text-foreground/80 relative !right-12 h-6 w-fit items-center justify-center rounded-md p-1",
 					className
 				)}
 				{...$$restProps}
 			>
-				<span class="sr-only">Copy</span>
-				{#if copied}
-					<Check class="h-3 w-3" tabindex="-1" />
-				{:else}
-					<Copy class="h-3 w-3" tabindex="-1" />
-				{/if}
+				<span class="sr-only">select package manager</span>
+
+				<span class="flex items-center pl-1">
+					{$selectedPackageManager}
+					<CaretSort size="20" />
+				</span>
 			</Button>
 		</DropdownMenu.Trigger>
+
 		<DropdownMenu.Content align="end">
-			{#each Object.entries(commands) as [key, command]}
-				{#if command}
-					<DropdownMenu.Item
-						on:click={() =>
-							navigator.clipboard
-								.writeText(command)
-								.then(handleCopyDone)
-								.catch(handleCopyError)}
-					>
-						{key}
-					</DropdownMenu.Item>
-				{/if}
+			{#each packageManagers as pm (pm)}
+				<DropdownMenu.Item
+					on:click={() => {
+						selectedPackageManager.set(pm);
+						tick().then(() => {
+							copyCode();
+						});
+					}}
+				>
+					{pm}
+				</DropdownMenu.Item>
 			{/each}
 		</DropdownMenu.Content>
 	</DropdownMenu.Root>
-{:else}
-	<button
-		class={cn(
-			"focus-visible:ring-ring absolute right-4 top-4 z-10 inline-flex h-6 w-6 items-center justify-center rounded-md text-sm font-medium text-zinc-50 transition-colors hover:bg-zinc-700 hover:text-zinc-50 focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
-			className
-		)}
-		use:clickToCopyAction={value}
-		on:copy-done={handleCopyDone}
-		on:copy-error={handleCopyError}
-		{...$$restProps}
-	>
-		<span class="sr-only">Copy</span>
-		{#if copied}
-			<Check class="h-3 w-3" tabindex="-1" />
-		{:else}
-			<Copy class="h-3 w-3" tabindex="-1" />
-		{/if}
-	</button>
 {/if}
+<button
+	class={cn(
+		"focus-visible:ring-ring absolute right-4 top-4 z-10 inline-flex h-6 w-6 items-center justify-center rounded-md text-sm font-medium text-zinc-50 transition-colors hover:bg-zinc-700 hover:text-zinc-50 focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+		className
+	)}
+	on:click={copyCode}
+	{...$$restProps}
+>
+	<span class="sr-only">Copy</span>
+	{#if copied}
+		<Check class="h-3 w-3" tabindex="-1" />
+	{:else}
+		<Copy class="h-3 w-3" tabindex="-1" />
+	{/if}
+</button>
diff --git a/sites/docs/src/lib/components/docs/index.ts b/sites/docs/src/lib/components/docs/index.ts
index 533343ec0..f8b8ccb15 100644
--- a/sites/docs/src/lib/components/docs/index.ts
+++ b/sites/docs/src/lib/components/docs/index.ts
@@ -23,6 +23,10 @@ export { default as CommandMenu } from "./command-menu.svelte";
 export { default as ModeToggle } from "./mode-toggle.svelte";
 export { default as Announcement } from "./announcement.svelte";
 export { default as LinkedCard } from "./linked-card.svelte";
+export { default as PMExecute } from "./pm-execute.svelte";
+export { default as PMAddComp } from "./pm-add-comp.svelte";
+export { default as PMCreate } from "./pm-create.svelte";
+export { default as PMInstall } from "./pm-install.svelte";
 
 export * from "./icons/index.js";
 export * from "./page-header/index.js";
diff --git a/sites/docs/src/lib/components/docs/markdown/pre.svelte b/sites/docs/src/lib/components/docs/markdown/pre.svelte
index b70c4d074..12796d3db 100644
--- a/sites/docs/src/lib/components/docs/markdown/pre.svelte
+++ b/sites/docs/src/lib/components/docs/markdown/pre.svelte
@@ -1,19 +1,32 @@
 <script lang="ts">
+	import { tick } from "svelte";
 	import { CopyButton } from "$lib/components/docs/index.js";
-	import { cn } from "$lib/utils.js";
+	import { cn, createCopyCodeButton } from "$lib/utils.js";
+	import { getPackageManager } from "$lib/stores/package-manager.js";
+
+	const selectedPackageManager = getPackageManager();
 
 	let className: string | undefined | null = undefined;
 	export { className as class };
+	export let isPackageManagerBlock = false;
+
+	const { copied, copyCode, codeString, setCodeString } = createCopyCodeButton();
 
-	let codeString: string;
+	let preNode: HTMLPreElement;
 
-	function copyCodeToClipboard(node: HTMLPreElement) {
-		codeString = node.innerText.trim() ?? "";
+	function handleCopy() {
+		if ($selectedPackageManager && preNode) {
+			codeString.set(preNode.innerText.trim().replaceAll("  ", " ") ?? "");
+		}
+		tick().then(() => {
+			copyCode();
+		});
 	}
 </script>
 
 <pre
-	use:copyCodeToClipboard
+	bind:this={preNode}
+	use:setCodeString
 	class={cn(
 		"mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900",
 		className
@@ -21,4 +34,10 @@
 	{...$$restProps}>
 	<slot />
 </pre>
-<CopyButton value={codeString} class={cn("pre-copy-btn absolute right-4 top-4")} />
+<CopyButton
+	{isPackageManagerBlock}
+	copied={$copied}
+	copyCode={handleCopy}
+	value={$codeString}
+	class={cn("pre-copy-btn absolute right-4 top-4")}
+/>
diff --git a/sites/docs/src/lib/components/docs/pm-add-comp.svelte b/sites/docs/src/lib/components/docs/pm-add-comp.svelte
new file mode 100644
index 000000000..7071f3236
--- /dev/null
+++ b/sites/docs/src/lib/components/docs/pm-add-comp.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import PMExecute from "./pm-execute.svelte";
+	export let name: string;
+</script>
+
+<PMExecute command={`shadcn-svelte@latest add ${name}`} />
diff --git a/sites/docs/src/lib/components/docs/pm-block.svelte b/sites/docs/src/lib/components/docs/pm-block.svelte
new file mode 100644
index 000000000..ff3bf9290
--- /dev/null
+++ b/sites/docs/src/lib/components/docs/pm-block.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+	import Pre from "./markdown/pre.svelte";
+	import {
+		type PackageManager,
+		getPackageManager,
+		getPackageManagerInstallCmd,
+		getPackageManagerScriptCmd,
+	} from "$lib/stores/package-manager.js";
+
+	type PMBlockType = "execute" | "create" | "install";
+
+	export let type: PMBlockType;
+	export let command: string = "";
+
+	const selectedPackageManager = getPackageManager();
+
+	function getCmd(type: PMBlockType, pm: PackageManager) {
+		if (type === "execute") return getPackageManagerScriptCmd(pm);
+		return pm;
+	}
+
+	function getInstallCommand() {
+		if (command === "") return "install";
+		return getPackageManagerInstallCmd($selectedPackageManager);
+	}
+
+	let cmdStart = getCmd(type, $selectedPackageManager);
+
+	$: cmdStart = getCmd(type, $selectedPackageManager);
+</script>
+
+<figure data-rehype-pretty-code-figure>
+	<Pre
+		isPackageManagerBlock={true}
+		tabindex="0"
+		data-language="bash"
+		data-theme="Lambda Studio - Blackout"
+	>
+		<code data-language="bash" data-theme="Lambda Studio — Blackout" style="display: grid;">
+			<span data-line>
+				<span style="color:#FFF;font-weight:bold">{`${cmdStart}`}</span>
+				{#if type === "install" || type === "create"}
+					<span style="color:#FFF8">
+						{`${type === "install" ? getInstallCommand() : "create"}${command === "" ? "" : ` `}`}
+					</span>
+				{/if}
+				{#if command !== ""}
+					{#each command.split(" ") as word, i}
+						{#if i === 0}
+							<span style="color:#FFF8; margin-left:-8px">{`${word}`}</span>
+						{:else}
+							<span style="color:#FFF8">{` ${word}`}</span>
+						{/if}
+					{/each}
+				{/if}
+			</span>
+		</code>
+	</Pre>
+</figure>
diff --git a/sites/docs/src/lib/components/docs/pm-create.svelte b/sites/docs/src/lib/components/docs/pm-create.svelte
new file mode 100644
index 000000000..0d0386601
--- /dev/null
+++ b/sites/docs/src/lib/components/docs/pm-create.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import PMBlock from "./pm-block.svelte";
+	export let command: string;
+</script>
+
+<PMBlock type="create" {command} />
diff --git a/sites/docs/src/lib/components/docs/pm-execute.svelte b/sites/docs/src/lib/components/docs/pm-execute.svelte
new file mode 100644
index 000000000..1b048a367
--- /dev/null
+++ b/sites/docs/src/lib/components/docs/pm-execute.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import PMBlock from "./pm-block.svelte";
+	export let command: string;
+</script>
+
+<PMBlock type="execute" {command} />
diff --git a/sites/docs/src/lib/components/docs/pm-install.svelte b/sites/docs/src/lib/components/docs/pm-install.svelte
new file mode 100644
index 000000000..739563f1f
--- /dev/null
+++ b/sites/docs/src/lib/components/docs/pm-install.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import PMBlock from "./pm-block.svelte";
+	export let command: string = "";
+</script>
+
+<PMBlock type="install" {command} />
diff --git a/sites/docs/src/lib/stores/package-manager.ts b/sites/docs/src/lib/stores/package-manager.ts
new file mode 100644
index 000000000..91763e65b
--- /dev/null
+++ b/sites/docs/src/lib/stores/package-manager.ts
@@ -0,0 +1,49 @@
+import { getContext, setContext } from "svelte";
+import { persisted } from "svelte-persisted-store";
+
+const PACKAGE_MANAGER = Symbol("packageManager");
+
+export function setPackageManager(initialValue: PackageManager = "npm") {
+	const packageManager = createPackageManagerStore("packageManager", initialValue);
+	setContext(PACKAGE_MANAGER, packageManager);
+	return packageManager;
+}
+
+export function getPackageManager(): ReturnType<typeof setPackageManager> {
+	return getContext(PACKAGE_MANAGER);
+}
+
+function createPackageManagerStore(key: string, initialValue: PackageManager) {
+	const store = persisted(key, initialValue);
+	return store;
+}
+
+export const packageManagers = ["pnpm", "bun", "yarn", "npm"] as const;
+export type PackageManager = (typeof packageManagers)[number];
+
+const packageManagerToScriptCmd: Record<PackageManager, string> = {
+	npm: "npx",
+	yarn: "yarn dlx",
+	pnpm: "pnpm dlx",
+	bun: "bunx",
+};
+
+export function getPackageManagerScriptCmd(pm: PackageManager): string {
+	return packageManagerToScriptCmd[pm];
+}
+
+const packageManagerToInstallCmd: Record<PackageManager, string> = {
+	npm: "install",
+	yarn: "add",
+	pnpm: "add",
+	bun: "add",
+};
+
+export function getPackageManagerInstallCmd(pm: PackageManager): string {
+	return packageManagerToInstallCmd[pm];
+}
+
+// eslint-disable-next-line ts/no-explicit-any
+export function isPackageManager(value: any): value is PackageManager {
+	return packageManagers.includes(value);
+}
diff --git a/sites/docs/src/lib/utils.ts b/sites/docs/src/lib/utils.ts
index 3b9e2e511..eed54357c 100644
--- a/sites/docs/src/lib/utils.ts
+++ b/sites/docs/src/lib/utils.ts
@@ -1,7 +1,7 @@
 import type { ClassValue } from "clsx";
 import { clsx } from "clsx";
 import { cubicOut } from "svelte/easing";
-import { derived, writable } from "svelte/store";
+import { derived, get, writable } from "svelte/store";
 import type { TransitionConfig } from "svelte/transition";
 import { twMerge } from "tailwind-merge";
 import { error } from "@sveltejs/kit";
@@ -83,13 +83,13 @@ export function hexToRgb(hex: string): [number, number, number] {
 }
 
 export function createCopyCodeButton() {
-	let codeString = "";
+	const codeString = writable("");
 	const copied = writable(false);
 	let copyTimeout = 0;
 
 	function copyCode() {
 		if (!isBrowser) return;
-		navigator.clipboard.writeText(codeString);
+		navigator.clipboard.writeText(get(codeString));
 		copied.set(true);
 		clearTimeout(copyTimeout);
 		copyTimeout = window.setTimeout(() => {
@@ -98,13 +98,14 @@ export function createCopyCodeButton() {
 	}
 
 	function setCodeString(node: HTMLElement) {
-		codeString = node.innerText.trim() ?? "";
+		codeString.set(node.innerText.trim() ?? "");
 	}
 
 	return {
 		copied,
 		copyCode,
 		setCodeString,
+		codeString,
 	};
 }
 
@@ -241,3 +242,35 @@ export function getLiftMode(name: string) {
 		toggleLiftMode,
 	};
 }
+
+export const packageManagers = ["pnpm", "bun", "yarn", "npm"] as const;
+export type PackageManager = (typeof packageManagers)[number];
+
+export const selectedPackageManager = persisted<PackageManager>("package-manager", "npm");
+
+const packageManagerToScriptCmd: Record<PackageManager, string> = {
+	npm: "npx",
+	yarn: "yarn dlx",
+	pnpm: "pnpm dlx",
+	bun: "bunx",
+};
+
+export function getPackageManagerScriptCmd(pm: PackageManager): string {
+	return packageManagerToScriptCmd[pm];
+}
+
+const packageManagerToInstallCmd: Record<PackageManager, string> = {
+	npm: "install",
+	yarn: "add",
+	pnpm: "add",
+	bun: "add",
+};
+
+export function getPackageManagerInstallCmd(pm: PackageManager): string {
+	return packageManagerToInstallCmd[pm];
+}
+
+// eslint-disable-next-line ts/no-explicit-any
+export function isPackageManager(value: any): value is PackageManager {
+	return packageManagers.includes(value);
+}
diff --git a/sites/docs/src/routes/+layout.svelte b/sites/docs/src/routes/+layout.svelte
index 939ca3feb..20a412900 100644
--- a/sites/docs/src/routes/+layout.svelte
+++ b/sites/docs/src/routes/+layout.svelte
@@ -7,6 +7,9 @@
 	import { config } from "$lib/stores/index.js";
 	import { Toaster as DefaultSonner } from "$lib/registry/default/ui/sonner/index.js";
 	import { Toaster as NYSonner } from "$lib/registry/new-york/ui/sonner/index.js";
+	import { setPackageManager } from "$lib/stores/package-manager.js";
+
+	setPackageManager();
 
 	$: updateTheme($config.theme, $page.url.pathname);
 </script>
diff --git a/sites/docs/tsconfig.json b/sites/docs/tsconfig.json
index 0c1dbb291..5684e238a 100644
--- a/sites/docs/tsconfig.json
+++ b/sites/docs/tsconfig.json
@@ -12,5 +12,27 @@
 		"moduleResolution": "NodeNext",
 		"module": "NodeNext",
 		"verbatimModuleSyntax": true
-	}
+	},
+	"include": [
+		// SvelteKit defaults
+		"./.svelte-kit/ambient.d.ts",
+		"./.svelte-kit/non-ambient.d.ts",
+		"./.svelte-kit/types/**/$types.d.ts",
+		"./vite.config.js",
+		"./vite.config.ts",
+		"./src/**/*.js",
+		"./src/**/*.ts",
+		"./src/**/*.svelte",
+		"./tests/**/*.js",
+		"./tests/**/*.ts",
+		"./tests/**/*.svelte",
+		// Additions
+		"./mdsx.config.js"
+	],
+	"exclude": [
+		"./node_modules/**",
+		"./src/service-worker.js",
+		"./src/service-worker.ts",
+		"./src/service-worker.d.ts"
+	]
 }