From 49093692349e0b81fc89f3db0b86c495f56d4ada Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Mon, 24 Nov 2025 06:52:42 -0500
Subject: [PATCH] PackageManager.svelte for Getting Started

Also spelling error fix (ceated->created)
---
 docs/src/lib/components/PackageManager.svelte | 62 +++++++++++++++++++
 docs/src/routes/docs/getting-started/+page.md |  9 +--
 2 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 docs/src/lib/components/PackageManager.svelte

diff --git a/docs/src/lib/components/PackageManager.svelte b/docs/src/lib/components/PackageManager.svelte
new file mode 100644
index 000000000..936a091b5
--- /dev/null
+++ b/docs/src/lib/components/PackageManager.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Code from './Code.svelte';
+	import { Tabs } from 'svelte-ux';
+
+	interface Props {
+		packageName?: string;
+		options?: {
+			value: number;
+			label: string;
+			command: string;
+		}[];
+	}
+
+	let {
+		packageName = 'layerchart',
+		options = [
+			{
+				value: 0,
+				label: 'pnpm',
+				command: 'pnpm i'
+			},
+			{
+				value: 1,
+				label: 'npm',
+				command: 'npm i'
+			},
+			{
+				value: 2,
+				label: 'bun',
+				command: 'bun add'
+			},
+			{
+				value: 3,
+				label: 'deno',
+				command: 'deno add'
+			},
+			{
+				value: 4,
+				label: 'yarn',
+				command: 'yarn add'
+			}
+		]
+	}: Props = $props();
+
+	let value = $state(0);
+</script>
+
+<div class="grid grid-cols-2 gap-4 pt-4 w-full">
+	<Tabs
+		{options}
+		placement="top"
+		bind:value
+		classes={{
+			content: 'w-full border rounded-b rounded-tr w-full',
+			tab: { root: 'rounded-t' }
+		}}
+	>
+		<svelte:fragment slot="content" let:value>
+			<Code source={`${options[value].command} ${packageName}`} language="sh" />
+		</svelte:fragment>
+	</Tabs>
+</div>
diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index b3c6a622c..7356ffb3a 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Example from '$lib/components/Example.svelte';
+	import PackageManager from '$lib/components/PackageManager.svelte';
 </script>
 
 # Getting Started
@@ -24,15 +25,11 @@ or checkout out the [standlone example](https://github.com/techniq/layerchart/tr
 
 ## Manual setup
 
-To manually setup LayerChart in a new project (such as one ceated with [sv create](https://svelte.dev/docs/cli/sv-create)) or in an existing project.
+To manually setup LayerChart in a new project (such as one created with [sv create](https://svelte.dev/docs/cli/sv-create)) or in an existing project.
 
 First import `layerchart` with your package manager of choice:
 
-```sh
-npm install layerchart
-# or
-pnpm install layerchart
-```
+<PackageManager />
 
 then import the components from `layerchart`: