From e7cb6f88fdd40c022c8a95264c651f4c250be5fd Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Mon, 24 Nov 2025 14:58:49 -0500
Subject: [PATCH 1/3] Added TabbedContent.svelte

Component allows for source code options in a compact tabbed interface.

I have also added a prop to Code.svelte `includeCopyButton` defaulted to true. This option allows removal of copy button if code is more pseudocode which shouldn't be copied completely.

i.e
```js
<script lang="ts">
import { Chart } from "layerchart";

...

</script>
```
---
 docs/src/lib/components/Code.svelte           | 18 ++--
 docs/src/lib/components/TabbedCode.svelte     | 42 ++++++++++
 docs/src/routes/docs/getting-started/+page.md | 84 ++++++++++++-------
 3 files changed, 107 insertions(+), 37 deletions(-)
 create mode 100644 docs/src/lib/components/TabbedCode.svelte

diff --git a/docs/src/lib/components/Code.svelte b/docs/src/lib/components/Code.svelte
index 29d95bd5e..e8a8bdbf2 100644
--- a/docs/src/lib/components/Code.svelte
+++ b/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>
 
diff --git a/docs/src/lib/components/TabbedCode.svelte b/docs/src/lib/components/TabbedCode.svelte
new file mode 100644
index 000000000..e8c4f998b
--- /dev/null
+++ b/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(button.bg-surface-100) {
+		background-color: var(--color-surface-300);
+		border-bottom-color: var(--color-surface-300);
+	}
+</style>
diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index a57f5767e..1f6defc10 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/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,57 @@
 			}
 		},
 	}
+
+	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: 'DaisyUI 5',
+				source: "@import 'layerchart/daisyui-5.css';"
+			},
+		];
 </script>
 
 # Getting Started
@@ -77,11 +129,7 @@ To manually setup LayerChart in a new project (such as one ceated with [sv creat
 
 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 +158,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>

From 34fa14a81834aee07ff6a35e8d926dd32b857485 Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 25 Nov 2025 10:18:01 -0500
Subject: [PATCH 2/3] Fix typo.  Add Svelte UX tab

---
 docs/src/routes/docs/getting-started/+page.md | 49 ++++++++++---------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index 1f6defc10..845777071 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -68,27 +68,32 @@
 	]
 
 	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: 'DaisyUI 5',
-				source: "@import 'layerchart/daisyui-5.css';"
-			},
-		];
+		{
+			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
@@ -125,7 +130,7 @@ 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:
 

From 135949015180dc9bf99776a838c912c82530163e Mon Sep 17 00:00:00 2001
From: Sean Lynch <techniq35@gmail.com>
Date: Tue, 25 Nov 2025 10:18:58 -0500
Subject: [PATCH 3/3] Qualify class override just in case

---
 docs/src/lib/components/TabbedCode.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/lib/components/TabbedCode.svelte b/docs/src/lib/components/TabbedCode.svelte
index e8c4f998b..25737e8b5 100644
--- a/docs/src/lib/components/TabbedCode.svelte
+++ b/docs/src/lib/components/TabbedCode.svelte
@@ -35,7 +35,7 @@
 
 <style>
 	/* Note: Can be updated if Svelte-UX with activetab css class. */
-	:global(button.bg-surface-100) {
+	:global(.Tabs button.bg-surface-100) {
 		background-color: var(--color-surface-300);
 		border-bottom-color: var(--color-surface-300);
 	}