Added TabbedContent.svelte

docs/src/lib/components/Code.svelte

@@ -15,12 +15,14 @@
 	interface Props {
 		source?: string | null;
 		language?: string;
+		includeCopyButton?: boolean;
 		classes?: { root?: string; pre?: string; code?: string };
 	}
 
 	let {
 		source = null,
 		language = 'svelte',
+		includeCopyButton = true,
 		classes = {},
 		class: className
 	}: Props & HTMLAttributes<HTMLDivElement> = $props();
@@ -55,13 +57,15 @@
       </code>
     </pre>
 
-		<div class="absolute top-0 right-0 p-2 z-10">
-			<CopyButton
-				value={source ?? ''}
-				class="text-surface-content/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
-				size="sm"
-			/>
-		</div>
+		{#if includeCopyButton}
+			<div class="absolute top-0 right-0 p-2 z-10">
+				<CopyButton
+					value={source ?? ''}
+					class="text-surface-content/70 hover:bg-surface-100/20 py-1 backdrop-blur-md"
+					size="sm"
+				/>
+			</div>
+		{/if}
 	{/if}
 </div>
 

docs/src/lib/components/TabbedCode.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Code from './Code.svelte';
+	import { Tabs } from 'svelte-ux';
+
+	interface Props {
+		language?: string;
+		includeCopyButton?: boolean;
+		options: {
+			value: number;
+			label: string;
+			source: string;
+		}[];
+	}
+
+	let { language = '', includeCopyButton = true, options }: Props = $props();
+
+	let value = $state(0);
+</script>
+
+<div class="w-full py-4">
+	<Tabs
+		{options}
+		placement="top"
+		bind:value
+		classes={{
+			content: 'border rounded-b rounded-tr',
+			tab: { root: 'rounded-t' }
+		}}
+	>
+		<svelte:fragment slot="content" let:value>
+			<Code source={`${options[value].source}`} {language} {includeCopyButton} />
+		</svelte:fragment>
+	</Tabs>
+</div>
+
+<style>
+	/* Note: Can be updated if Svelte-UX with activetab css class. */
+	:global(.Tabs button.bg-surface-100) {
+		background-color: var(--color-surface-300);
+		border-bottom-color: var(--color-surface-300);
+	}
+</style>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Button } from 'svelte-ux';
   import Example from '$lib/components/Example.svelte';
+	import TabbedCode from '$lib/components/TabbedCode.svelte';
   import {
 		a as A,
 		ul as Ul,
@@ -37,6 +38,62 @@
 			}
 		},
 	}
+
+	const layerchartOptions = [
+		{
+			value: 0,
+			label: 'pnpm',
+			source: 'pnpm i layerchart',
+		},
+				{
+			value: 1,
+			label: 'npm',
+			source: 'npm i layerchart',
+		},
+				{
+			value: 2,
+			label: 'bun',
+			source: 'bun add layerchart',
+		},
+				{
+			value: 3,
+			label: 'deno',
+			source: 'deno add layerchart',
+		},
+				{
+			value: 4,
+			label: 'yarn',
+			source: 'yarn add layerchart',
+		},
+	]
+
+	const integrationOptions = [
+		{
+			value: 0,
+			label: 'shadcn-svelte',
+			source: "@import 'layerchart/shadcn-svelte.css';"
+		},
+		{
+			value: 1,
+			label: 'Skeleton 3',
+			source: "@import 'layerchart/skeleton-3.css';"
+		},
+		{
+			value: 2,
+			label: 'Skeleton 4',
+			source: "@import 'layerchart/skeleton-4.css';"
+		},
+		{
+			value: 3,
+			label: 'Svelte UX',
+			source: "/* Works out of the box */"
+		},
+		{
+			value: 4,
+			label: 'DaisyUI 5',
+			source: "@import 'layerchart/daisyui-5.css';"
+		},
+	];
 </script>
 
 # Getting Started
@@ -73,15 +130,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
-```
+<TabbedCode language="sh" options={layerchartOptions} />
 
 then import the components from `layerchart`:
 
@@ -110,31 +163,7 @@ Out of the box LayerChart will use `currentColor` as the default color, but you
 
 LayerChart [provides](https://github.com/techniq/layerchart/tree/next/packages/layerchart/src/lib/styles) `.css` files for popular frameworks to simplify the setup with a single import
 
-### daisyUI
-
-```css
-@import 'layerchart/daisyui-5.css';
-```
-
-### shadcn-svelte
-
-```css
-@import 'layerchart/shadcn-svelte.css';
-```
-
-### Skeleton
-
-#### v3
-
-```css
-@import 'layerchart/skeleton-3.css';
-```
-
-#### v4
-
-```css
-@import 'layerchart/skeleton-4.css';
-```
+<TabbedCode language="css" options={integrationOptions} />
 
 {#snippet githubButton(path, text = 'Source')}
 <Button href="https://github.com/techniq/layerchart/tree/docs-v2/examples/{path}" icon={LucideGithub} size="sm" variant="fill-light" target="\_blank">{text}</Button>