PackageManager.svelte for Getting Started

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>

docs/src/routes/docs/getting-started/+page.md

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { Button } from 'svelte-ux';
   import Example from '$lib/components/Example.svelte';
+	import PackageManager from '$lib/components/PackageManager.svelte';
+
   import {
 		a as A,
 		ul as Ul,
@@ -73,15 +75,11 @@ or checkout out the **standlone** {@render githubButton('standalone')} {@render
 
 ## 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`: