diff --git a/package.json b/package.json
index b5ffbcce18..b1cd17c056 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "svelte-doc-llm": "^0.5.1",
     "svelte-lib-helpers": "^0.4.31",
     "svelte-meta-tags": "^4.5.0",
-    "svelte-rune-highlight": "^0.7.1",
+    "svelte-rune-highlight": "^0.11.0",
     "tailwindcss": "^4.1.16",
     "tsx": "^4.20.6",
     "typescript": "^5.9.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd1cde9fb4..75e098a3bc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -205,8 +205,8 @@ importers:
         specifier: ^4.5.0
         version: 4.5.0(svelte@5.43.3)
       svelte-rune-highlight:
-        specifier: ^0.7.1
-        version: 0.7.1(svelte@5.43.3)
+        specifier: ^0.11.0
+        version: 0.11.0(svelte@5.43.3)
       tailwindcss:
         specifier: ^4.1.16
         version: 4.1.16
@@ -3342,8 +3342,8 @@ packages:
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.1
 
-  svelte-rune-highlight@0.7.1:
-    resolution: {integrity: sha512-R/mzLB+QBt3WGSrYpCg/n3r7UzeqfrLx7Cv2JqH9LdckTeTT2MBxhuo1ZvLWss2QXnIyLTr0Wx4g6xOseMoSsA==}
+  svelte-rune-highlight@0.11.0:
+    resolution: {integrity: sha512-ENOB6OXpzWn+WAPthVTd4X8x4TzHkjhYyIsM+S47Xz5e/zkByyTnp0Yj7538H7wfcWw08J9zPS95x5h6TaqicA==}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -6877,7 +6877,7 @@ snapshots:
     dependencies:
       svelte: 5.43.3
 
-  svelte-rune-highlight@0.7.1(svelte@5.43.3):
+  svelte-rune-highlight@0.11.0(svelte@5.43.3):
     dependencies:
       highlight.js: 11.11.1
       svelte: 5.43.3
diff --git a/src/lib/buttons/Button.svelte b/src/lib/buttons/Button.svelte
index 879b98a0f5..2b861a5fdd 100644
--- a/src/lib/buttons/Button.svelte
+++ b/src/lib/buttons/Button.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import clsx from "clsx";
+  import { Spinner } from "$lib";
   import type { SizeType, ButtonProps } from "$lib";
   import { getTheme } from "$lib/theme/themeUtils";
   import { button } from "./theme";
@@ -8,7 +9,7 @@
   const group: SizeType = getContext("group");
   const ctxDisabled: boolean | undefined = getContext("disabled");
 
-  let { children, pill, outline = false, size = "md", color, shadow = false, tag = "button", disabled, loading = false, class: className, ...restProps }: ButtonProps = $props();
+  let { children, pill, outline = false, size = "md", color, shadow = false, tag = "button", disabled, loading = false, spinnerProps = { size: "4" }, class: className, ...restProps }: ButtonProps = $props();
 
   const theme = getTheme("button");
 
@@ -16,7 +17,8 @@
   let actualColor = $derived(color ?? (group ? (outline ? "dark" : "alternative") : "primary"));
   let isDisabled = $derived(Boolean(ctxDisabled) || Boolean(disabled) || loading);
 
-  const { base, outline: outline_, shadow: shadow_ } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
+  const { base, outline: outline_, shadow: shadow_, spinner } = $derived(button({ color: actualColor, size: actualSize, disabled: isDisabled, pill, group: !!group }));
+
   let btnCls = $derived(base({ class: clsx(outline && outline_(), shadow && shadow_(), theme?.base, className) }));
 </script>
 
@@ -28,10 +30,7 @@
   <button type="button" {...restProps} class={btnCls} disabled={isDisabled}>
     {@render children?.()}
     {#if loading}
-      <svg class="ml-2 h-4 w-4 animate-spin text-white" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" />
-      </svg>
+      <Spinner {...spinnerProps} class={spinner()}/>
     {/if}
   </button>
 {:else}
@@ -55,6 +54,7 @@
 @prop tag = "button"
 @prop disabled
 @prop loading = false
+@prop spinnerProps = { size: "4" }
 @prop class: className
 @prop ...restProps
 -->
diff --git a/src/lib/buttons/theme.ts b/src/lib/buttons/theme.ts
index acb922cc94..aa13698d2a 100644
--- a/src/lib/buttons/theme.ts
+++ b/src/lib/buttons/theme.ts
@@ -8,7 +8,8 @@ export const button = tv({
   slots: {
     base: "text-center font-medium inline-flex items-center justify-center",
     outline: "bg-transparent border hover:text-white dark:bg-transparent dark:hover-text-white",
-    shadow: "shadow-lg"
+    shadow: "shadow-lg",
+    spinner: "ms-2"
   },
   variants: {
     color: {
diff --git a/src/lib/datepicker/theme.ts b/src/lib/datepicker/theme.ts
index 59cc7c546e..e10c9e0d74 100644
--- a/src/lib/datepicker/theme.ts
+++ b/src/lib/datepicker/theme.ts
@@ -22,29 +22,29 @@ export const datepicker = tv({
   },
   variants: {
     color: {
-      primary: { input: "focus:ring-primary-500 dark:focus:ring-primary-400", dayButton: "bg-primary-100 dark:bg-primary-900" },
-      blue: { input: "focus:ring-blue-500 dark:focus:ring-blue-400", dayButton: "bg-blue-100 dark:bg-blue-900" },
-      red: { input: "focus:ring-red-500 dark:focus:ring-red-400", dayButton: "bg-red-100 dark:bg-red-900" },
-      green: { input: "focus:ring-green-500 dark:focus:ring-green-400", dayButton: "bg-green-100 dark:bg-green-900" },
-      yellow: { input: "focus:ring-yellow-500 dark:focus:ring-yellow-400", dayButton: "bg-yellow-100 dark:bg-yellow-900" },
-      purple: { input: "focus:ring-purple-500 dark:focus:ring-purple-400", dayButton: "bg-purple-100 dark:bg-purple-900" },
-      dark: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
-      light: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
-      alternative: { input: "focus:ring-alternative-500 dark:focus:ring-alternative-400", dayButton: "bg-alternative-100 dark:bg-alternative-900" },
-      secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-100 dark:bg-secondary-900" },
-      gray: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-100 dark:bg-gray-900" },
-      orange: { input: "focus:ring-orange-500 dark:focus:ring-orange-400", dayButton: "bg-orange-100 dark:bg-orange-900" },
-      amber: { input: "focus:ring-amber-500 dark:focus:ring-amber-400", dayButton: "bg-amber-100 dark:bg-amber-900" },
-      lime: { input: "focus:ring-lime-500 dark:focus:ring-lime-400", dayButton: "bg-lime-100 dark:bg-lime-900" },
-      emerald: { input: "focus:ring-emerald-500 dark:focus:ring-emerald-400", dayButton: "bg-emerald-100 dark:bg-emerald-900" },
-      teal: { input: "focus:ring-teal-500 dark:focus:ring-teal-400", dayButton: "bg-teal-100 dark:bg-teal-900" },
-      cyan: { input: "focus:ring-cyan-500 dark:focus:ring-cyan-400", dayButton: "bg-cyan-100 dark:bg-cyan-900" },
-      sky: { input: "focus:ring-sky-500 dark:focus:ring-sky-400", dayButton: "bg-sky-100 dark:bg-sky-900" },
-      indigo: { input: "focus:ring-indigo-500 dark:focus:ring-indigo-400", dayButton: "bg-indigo-100 dark:bg-indigo-900" },
-      violet: { input: "focus:ring-violet-500 dark:focus:ring-violet-400", dayButton: "bg-violet-100 dark:bg-violet-900" },
-      fuchsia: { input: "focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400", dayButton: "bg-fuchsia-100 dark:bg-fuchsia-900" },
-      pink: { input: "focus:ring-pink-500 dark:focus:ring-pink-400", dayButton: "bg-pink-100 dark:bg-pink-900" },
-      rose: { input: "focus:ring-rose-500 dark:focus:ring-rose-400", dayButton: "bg-rose-100 dark:bg-rose-900" }
+      primary: { input: "focus:ring-primary-500 dark:focus:ring-primary-400", dayButton: "bg-primary-300 dark:bg-primary-900" },
+      blue: { input: "focus:ring-blue-500 dark:focus:ring-blue-400", dayButton: "bg-blue-300 dark:bg-blue-900" },
+      red: { input: "focus:ring-red-500 dark:focus:ring-red-400", dayButton: "bg-red-300 dark:bg-red-900" },
+      green: { input: "focus:ring-green-500 dark:focus:ring-green-400", dayButton: "bg-green-300 dark:bg-green-900" },
+      yellow: { input: "focus:ring-yellow-500 dark:focus:ring-yellow-400", dayButton: "bg-yellow-300 dark:bg-yellow-900" },
+      purple: { input: "focus:ring-purple-500 dark:focus:ring-purple-400", dayButton: "bg-purple-300 dark:bg-purple-900" },
+      dark: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+      light: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+      alternative: { input: "focus:ring-alternative-500 dark:focus:ring-alternative-400", dayButton: "bg-alternative-300 dark:bg-alternative-900" },
+      secondary: { input: "focus:ring-secondary-500 dark:focus:ring-secondary-400", dayButton: "bg-secondary-300 dark:bg-secondary-900" },
+      gray: { input: "focus:ring-gray-500 dark:focus:ring-gray-400", dayButton: "bg-gray-300 dark:bg-gray-900" },
+      orange: { input: "focus:ring-orange-500 dark:focus:ring-orange-400", dayButton: "bg-orange-300 dark:bg-orange-900" },
+      amber: { input: "focus:ring-amber-500 dark:focus:ring-amber-400", dayButton: "bg-amber-300 dark:bg-amber-900" },
+      lime: { input: "focus:ring-lime-500 dark:focus:ring-lime-400", dayButton: "bg-lime-300 dark:bg-lime-900" },
+      emerald: { input: "focus:ring-emerald-500 dark:focus:ring-emerald-400", dayButton: "bg-emerald-300 dark:bg-emerald-900" },
+      teal: { input: "focus:ring-teal-500 dark:focus:ring-teal-400", dayButton: "bg-teal-300 dark:bg-teal-900" },
+      cyan: { input: "focus:ring-cyan-500 dark:focus:ring-cyan-400", dayButton: "bg-cyan-300 dark:bg-cyan-900" },
+      sky: { input: "focus:ring-sky-500 dark:focus:ring-sky-400", dayButton: "bg-sky-300 dark:bg-sky-900" },
+      indigo: { input: "focus:ring-indigo-500 dark:focus:ring-indigo-400", dayButton: "bg-indigo-300 dark:bg-indigo-900" },
+      violet: { input: "focus:ring-violet-500 dark:focus:ring-violet-400", dayButton: "bg-violet-300 dark:bg-violet-900" },
+      fuchsia: { input: "focus:ring-fuchsia-500 dark:focus:ring-fuchsia-400", dayButton: "bg-fuchsia-300 dark:bg-fuchsia-900" },
+      pink: { input: "focus:ring-pink-500 dark:focus:ring-pink-400", dayButton: "bg-pink-300 dark:bg-pink-900" },
+      rose: { input: "focus:ring-rose-500 dark:focus:ring-rose-400", dayButton: "bg-rose-300 dark:bg-rose-900" }
     },
     inline: {
       false: { base: "absolute z-10 mt-1" }
diff --git a/src/lib/spinner/theme.ts b/src/lib/spinner/theme.ts
index 40af8712e3..69ca1f8ff4 100644
--- a/src/lib/spinner/theme.ts
+++ b/src/lib/spinner/theme.ts
@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from "tailwind-variants";
 
-export type SpinnerVaraiants = VariantProps<typeof spinner>;
+export type SpinnerVariants = VariantProps<typeof spinner>;
 
 export const spinner = tv({
   base: "inline-block",
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 03b32bf766..654961461e 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -61,7 +61,7 @@ import type {
   WidgetPlaceholderVariants
 } from "$lib/skeleton/theme";
 import type { SpeedDialVariants, SpeedDialButtonVariants } from "$lib/speed-dial/theme";
-import type { SpinnerVaraiants } from "$lib/spinner/theme";
+import type { SpinnerVariants } from "$lib/spinner/theme";
 import type { StepIndicatorVariants } from "$lib/step-indicator/theme";
 import type { StepperVariants, ProgressStepperVariants, DetailedStepperVariants, VerticalStepperVariants, BreadcrumbStepperVariants, TimelineStepperVariants } from "$lib/stepper/theme";
 import type { PaginationItemVariants, PaginationVariants } from "$lib/pagination/theme";
@@ -348,6 +348,7 @@ export type ButtonProps = ButtonVariants &
     outline?: boolean;
     shadow?: boolean;
     loading?: boolean;
+    spinnerProps?: SpinnerProps;
   };
 
 export interface GradientButtonProps extends GradientButtonVariantes, HTMLButtonOrAnchorAttributes {
@@ -623,7 +624,7 @@ export interface DrawerProps extends DrawerVariants, Omit<DialogProps, "hidden"
   offset?: string;
 }
 
-export interface DrawerHandleProps extends DrawerHandleVariants, HTMLButtonAttributes {}
+export interface DrawerHandleProps extends DrawerHandleVariants, HTMLButtonAttributes { }
 
 export interface DrawerheadProps extends DrawerheadVariants, HTMLButtonAttributes {
   closeIcon?: Snippet;
@@ -782,7 +783,7 @@ export interface FloatingLabelInputProps extends FloatingLabelInputVaratiants, O
 }
 
 // helper
-export interface HelperProps extends HelperVariants, Omit<HTMLAttributes<HTMLParagraphElement>, "color"> {}
+export interface HelperProps extends HelperVariants, Omit<HTMLAttributes<HTMLParagraphElement>, "color"> { }
 
 // input
 export type InputValue = string | number | string[] | undefined;
@@ -978,7 +979,7 @@ export interface TimepickerProps {
   timeIntervals?: string[];
   columns?: ColumnCount;
   // Callback props instead of events
-  onselect?: (data: { time: string; endTime: string; [key: string]: string }) => void;
+  onselect?: (data: { time: string; endTime: string;[key: string]: string }) => void;
 }
 
 // textarea
@@ -1167,7 +1168,7 @@ export interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLD
   end?: Snippet;
 }
 
-export interface ToolbarGroupProps extends ToolbarGroupVariants, HTMLAttributes<HTMLDivElement> {}
+export interface ToolbarGroupProps extends ToolbarGroupVariants, HTMLAttributes<HTMLDivElement> { }
 
 export type ToolbarButtonProps = ToolbarButtonVariants &
   AnchorButtonAttributes & {
@@ -1484,7 +1485,7 @@ export interface SkeletonProps extends SkeletonVariants, HTMLAttributes<HTMLDivE
   size?: SkeletonVariants["size"];
 }
 
-export interface TestimonialPlaceholderProps extends TestimonialPlaceholderVariants, HTMLAttributes<HTMLDivElement> {}
+export interface TestimonialPlaceholderProps extends TestimonialPlaceholderVariants, HTMLAttributes<HTMLDivElement> { }
 
 export interface TextPlaceholderProps extends TextPlaceholderVariants, HTMLAttributes<HTMLDivElement> {
   size?: TextPlaceholderVariants["size"];
@@ -1494,7 +1495,7 @@ export interface VideoPlaceholderProps extends VideoPlaceholderVariants, HTMLAtt
   size?: VideoPlaceholderVariants["size"];
 }
 
-export interface WidgetPlaceholderProps extends WidgetPlaceholderVariants, HTMLAttributes<HTMLDivElement> {}
+export interface WidgetPlaceholderProps extends WidgetPlaceholderVariants, HTMLAttributes<HTMLDivElement> { }
 
 // speeddial
 export interface SpeedCtxType {
@@ -1553,8 +1554,8 @@ export type SpeedDialButtonProps = ButtonProps &
 // spinner
 export interface SpinnerProps extends SVGAttributes<SVGSVGElement> {
   type?: "default" | "dots" | "bars" | "pulse" | "orbit";
-  color?: SpinnerVaraiants["color"];
-  size?: SpinnerVaraiants["size"];
+  color?: SpinnerVariants["color"];
+  size?: SpinnerVariants["size"];
   currentFill?: string;
   currentColor?: string;
 }
@@ -1895,7 +1896,7 @@ export interface ToastContainerProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 // tooltip
-export interface TooltipProps extends TooltipVariants, PopperProps {}
+export interface TooltipProps extends TooltipVariants, PopperProps { }
 
 // typography
 // anchor
diff --git a/src/routes/admin-dashboard/(sidebar)/quickstart/+page.svelte b/src/routes/admin-dashboard/(sidebar)/quickstart/+page.svelte
index f2b1247645..b877304391 100644
--- a/src/routes/admin-dashboard/(sidebar)/quickstart/+page.svelte
+++ b/src/routes/admin-dashboard/(sidebar)/quickstart/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Breadcrumb, BreadcrumbItem, Heading } from "flowbite-svelte";
-  import { HighlightCompo } from "../../utils";
+  import { HighlightAuto } from "svelte-rune-highlight";
 
   const modules = import.meta.glob("./md/*.md", {
     query: "?raw",
@@ -18,6 +18,6 @@
     <Heading tag="h1" class="mb-8 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Flowbite Svelte Admin Dashboard</Heading>
 
     <Heading tag="h2" class="my-8 text-xl font-semibold text-gray-900 sm:text-2xl dark:text-white">Installation</Heading>
-    <HighlightCompo class="mb-8" codeLang="js" code={modules["./md/installation.md"] as string} />
+    <HighlightAuto class="mb-8" code={modules["./md/installation.md"] as string} />
   </div>
 </main>
diff --git a/src/routes/builder/skeleton/+page.svelte b/src/routes/builder/skeleton/+page.svelte
index 6293bc201d..c2605d9c52 100644
--- a/src/routes/builder/skeleton/+page.svelte
+++ b/src/routes/builder/skeleton/+page.svelte
@@ -20,7 +20,7 @@
     type ImagePlaceholderProps,
     type VideoPlaceholderProps
   } from "$lib";
-  import HighlightCompo from "../utils/HighlightCompo.svelte";
+  import { HighlightCompo } from "svelte-rune-highlight";
   import DynamicCodeBlockHighlight from "../utils/DynamicCodeBlockHighlight.svelte";
   import CodeWrapper from "../utils/CodeWrapper.svelte";
   import H1 from "../utils/H1.svelte";
diff --git a/src/routes/docs-examples/components/buttons/Loader.svelte b/src/routes/docs-examples/components/buttons/Loader.svelte
index 8f59723a83..51099adb19 100644
--- a/src/routes/docs-examples/components/buttons/Loader.svelte
+++ b/src/routes/docs-examples/components/buttons/Loader.svelte
@@ -2,6 +2,12 @@
   import { Button, Spinner } from "flowbite-svelte";
 </script>
 
+<Button loading>
+    Loading ...
+</Button>
+<Button loading spinnerProps={{size:"4", color:"green"}}>
+    Loading ...
+</Button>
 <Button>
   <Spinner class="me-3" size="4" color="gray" />Loading ...
 </Button>
diff --git a/src/routes/docs-examples/components/datepicker/Range.svelte b/src/routes/docs-examples/components/datepicker/Range.svelte
index 746e42efcd..2f945f9f80 100644
--- a/src/routes/docs-examples/components/datepicker/Range.svelte
+++ b/src/routes/docs-examples/components/datepicker/Range.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <div class="mb-64 md:w-1/2">
-  <Datepicker range bind:rangeFrom={dateRange.from} bind:rangeTo={dateRange.to} color="pink" />
+  <Datepicker range bind:rangeFrom={dateRange.from} bind:rangeTo={dateRange.to} color="blue" />
   <P class="mt-4">
     Selected range:
     {dateRange.from ? dateRange.from.toLocaleDateString() : "None"} -
diff --git a/src/routes/docs-examples/extend/clipboard-manager/+page.svelte b/src/routes/docs-examples/extend/clipboard-manager/+page.svelte
index 55236e5932..f755990d32 100644
--- a/src/routes/docs-examples/extend/clipboard-manager/+page.svelte
+++ b/src/routes/docs-examples/extend/clipboard-manager/+page.svelte
@@ -1,19 +1,26 @@
 <script lang="ts">
+  import { ExampleWrapper, HighlightCompo, transformComponents, transformModules } from 'svelte-rune-highlight';
+  import type { Component } from 'svelte';
   import { Table } from "$lib";
   import { clipboardManagerProps } from "./clipboardManagerProps";
-
   import { List, Li, P, Heading } from "$lib";
-  import HighlightCompo from "../../../utils/HighlightCompo.svelte";
-  import CodeWrapper from "../../../utils/CodeWrapper.svelte";
-  import * as ExampleComponents from "./examples";
 
-  const exampleModules = import.meta.glob("./examples/*.svelte", {
-    query: "?raw",
-    import: "default",
+  const componentModules = import.meta.glob('./examples/*.svelte', {
+    eager: true
+  }) as Record<string, { default: Component }>;
+
+  // Import source code
+  const exampleModules = import.meta.glob('./examples/*.svelte', {
+    query: '?raw',
+    import: 'default',
     eager: true
   }) as Record<string, string>;
 
-  const sentitiveEx = "detectSensitiveData=(text) => (/confidential|secret/i).test(text)";
+  // Transform both using helper functions
+  const components = transformComponents(componentModules);
+  const modules = transformModules(exampleModules);
+
+  const sensitiveEx = "detectSensitiveData=(text) => (/confidential|secret/i).test(text)";
 </script>
 
 <div class="mx-auto max-w-7xl space-y-8 p-6">
@@ -22,12 +29,7 @@
     <P>Real-world examples showing how to use the selection bubble menu feature</P>
   </div>
 
-  <CodeWrapper class="max-w-7xl">
-    <ExampleComponents.Interactive />
-    {#snippet codeblock()}
-      <HighlightCompo codeLang="ts" code={exampleModules["./examples/Interactive.svelte"] as string} class="max-w-7xl bg-white" />
-    {/snippet}
-  </CodeWrapper>
+  <ExampleWrapper component={components['Interactive']} code={modules['Interactive']} />
 
   <!-- Usage Examples -->
   <section class="space-y-6">
@@ -39,7 +41,7 @@
         <Heading tag="h3" class="text-lg font-semibold">Enable Selection Menu</Heading>
       </div>
       <P class="text-sm">Simplest setup - enable selection on entire page</P>
-      <HighlightCompo codeLang="ts" code={exampleModules["./examples/EnableSelectionMenu.svelte"] as string} class="max-w-7xl bg-white" />
+       <HighlightCompo code={modules["EnableSelectionMenu"] as string} class="max-w-7xl bg-white" />
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -55,12 +57,7 @@
         Use <code class="text-primary-700 font-bold">enableSelectionMenu</code>
         to show selection bubble menu.
       </P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.TargetSpecific />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/TargetSpecific.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['TargetSpecific']} code={modules['TargetSpecific']} innerClass="p-4"/>
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -73,12 +70,7 @@
         Set <code class="text-primary-700 font-bold">storageKey</code>
         to customize the localStorage key name.
       </P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.WithModal />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/WithModal.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['WithModal']} code={modules['WithModal']} innerClass="p-4"/>
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -93,12 +85,7 @@
         <code class="text-primary-700 font-bold">limit</code>
         prop to set max items to store.
       </P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.DocumentationSite />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/DocumentationSite.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['DocumentationSite']} code={modules['DocumentationSite']} innerClass="p-4" />
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -113,12 +100,7 @@
         <code class="text-primary-700 font-bold">clearLabel</code>
         to change labels.
       </P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.BlogReader />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/BlogReader.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['BlogReader']} code={modules['BlogReader']} innerClass="p-4" />
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -127,12 +109,7 @@
         <Heading tag="h3" class="text-lg font-semibold">Email Client / Support Dashboard</Heading>
       </div>
       <P class="text-sm">Quick responses with ability to save new ones from actual emails</P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.EmailClient />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/EmailClient.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['EmailClient']} code={modules['EmailClient']} innerClass="p-4" />
     </div>
 
     <!-- Example 6 -->
@@ -165,13 +142,7 @@
         <Li>Refreshing the page clears all clipboard items</Li>
         <Li>Data is lost when you close the tab</Li>
       </List>
-
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.SaveToStorage />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/SaveToStorage.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['SaveToStorage']} code={modules['SaveToStorage']} innerClass="p-4" />
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -186,7 +157,7 @@
         <code class="text-primary-700">detectSensitiveData</code>
         prop to provide your own logic.
       </P>
-      <HighlightCompo codeLang="ts" code={sentitiveEx} class="my-2 max-w-7xl bg-white" />
+      <HighlightCompo code={sensitiveEx} class="my-2 max-w-7xl bg-white" />
       <P>This will block texts containing "confidential" or "secret".</P>
       <List>
         <Li>Detects common sensitive information (credit cards, passwords, API keys, credentials).</Li>
@@ -196,12 +167,7 @@
         <Li>API key regex matches any long alphanumeric token (32+ chars), which may catch legitimate IDs</Li>
         <Li>Credential keyword regex may trigger on non-secret words like "token = false"</Li>
       </List>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.CodeEditor />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/CodeEditor.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['CodeEditor']} code={modules['CodeEditor']} innerClass="p-4" />
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -210,12 +176,7 @@
         <Heading tag="h3" class="text-lg font-semibold">Multiple Content Areas</Heading>
       </div>
       <P class="text-sm">Use class selector to enable selection across multiple elements</P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.MultipleContent />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/MultipleContent.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['MultipleContent']} code={modules['MultipleContent']} innerClass="p-4" />
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -227,12 +188,7 @@
         Use <code class="text-primary-700">showInput={false}</code>
         to hide the input box and use only selection menu with custom rendering
       </P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.NoManualInput />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/NoManualInput.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['NoManualInput']} code={modules['NoManualInput']} innerClass="p-4" />
     </div>
 
     <div class="space-y-3 rounded-lg p-6 shadow">
@@ -241,12 +197,7 @@
         <Heading tag="h3" class="text-lg font-semibold">Custom Empty State</Heading>
       </div>
       <P class="text-sm">Provide clear instructions for first-time users</P>
-      <CodeWrapper class="max-w-7xl">
-        <ExampleComponents.CustomEmptyState />
-        {#snippet codeblock()}
-          <HighlightCompo codeLang="ts" code={exampleModules["./examples/CustomEmptyState.svelte"] as string} class="max-w-7xl bg-white" />
-        {/snippet}
-      </CodeWrapper>
+      <ExampleWrapper component={components['CustomEmptyState']} code={modules['CustomEmptyState']} innerClass="p-4" />
     </div>
   </section>
 
diff --git a/src/routes/docs/pages/typescript.md b/src/routes/docs/pages/typescript.md
index 50b4706ba2..06cb1f2f7c 100644
--- a/src/routes/docs/pages/typescript.md
+++ b/src/routes/docs/pages/typescript.md
@@ -8,16 +8,27 @@ description: Learn more about the value types and class interfaces that you can
 ---
 
 <script lang="ts">
-  import TypeList from '$lib/types.ts?raw';
   import { LlmLink } from '../../utils';
-  import HighlightCompo from "../../utils/HighlightCompo.svelte";
+  import { Highlight } from 'svelte-rune-highlight';
+  import { HighlightCompo } from "svelte-rune-highlight";
+  import typescript from 'highlight.js/lib/languages/typescript';
+  const examples = import.meta.glob('../../../lib/types.ts', {
+    query: '?raw',
+    import: 'default',
+    eager: true
+  });
+  const tsLang = {
+    name: 'typescript',
+    register: typescript
+  };
 </script>
 
 ## Typescript types
 
 Enhance the reliability and scalability of your user interface code by leveraging data types. The following excerpt shows you the full list of TypeScript types and interfaces that are being used with the Flowbite Svelte library.
 
-<HighlightCompo codeLang="ts" code={TypeList as string} class="max-w-7xl bg-white" />
+<HighlightCompo language={tsLang} code={examples["../../../lib/types.ts"] as string} class="max-w-7xl bg-white" />
+
 
 ## LLM Link
 
diff --git a/src/routes/utils/HighlightCompo.svelte b/src/routes/utils/HighlightCompo.svelte
deleted file mode 100644
index 41a8d5c86f..0000000000
--- a/src/routes/utils/HighlightCompo.svelte
+++ /dev/null
@@ -1,82 +0,0 @@
-<script lang="ts">
-  import { HighlightSvelte, Highlight } from "svelte-rune-highlight";
-  import markdown from "highlight.js/lib/languages/markdown";
-  import { Button, Badge } from "$lib";
-  import { copyToClipboard, replaceLibImport } from "./helpers";
-  import { highlightcompo } from "./theme";
-
-  interface Props {
-    // componentStatus: boolean;
-    code: string;
-    badgeClass?: string;
-    buttonClass?: string;
-    codeLang?: string;
-    class?: string;
-    replaceLib?: boolean;
-  }
-
-  let { code, codeLang, badgeClass, buttonClass, replaceLib = true, class: className }: Props = $props();
-
-  const mdLang = {
-    name: "markdown",
-    register: markdown
-  };
-
-  const processedCode = $derived(replaceLib ? replaceLibImport(code) : code);
-  // console.log('code: ', code)
-
-  let showExpandButton: boolean = $state(false);
-  let expand: boolean = $state(false);
-  const checkOverflow = (el: HTMLElement) => {
-    const isOverflowingY = el.clientHeight < el.scrollHeight;
-    showExpandButton = isOverflowingY;
-  };
-
-  const { base, badge, button } = $derived(highlightcompo());
-  let copiedStatus = $state(false);
-
-  const handleExpandClick = () => {
-    expand = !expand;
-  };
-
-  function handleCopyClick() {
-    copyToClipboard(processedCode)
-      .then(() => {
-        copiedStatus = true;
-        setTimeout(() => {
-          copiedStatus = false;
-        }, 1000);
-      })
-      .catch((err) => {
-        console.error("Error in copying:", err);
-        // Handle the error as needed
-      });
-  }
-</script>
-
-<div class={base({ className })}>
-  <div class="relative">
-    <div class="overflow-hidden {showExpandButton ? 'pb-8' : ''}" class:max-h-72={!expand} tabindex="-1" use:checkOverflow>
-      {#if copiedStatus}
-        <Badge class={badge({ class: badgeClass })} color="green">Copied to clipboard</Badge>
-      {/if}
-      {#if codeLang === "md"}
-        <Highlight language={mdLang} code={processedCode} />
-      {:else if code}
-        <HighlightSvelte code={processedCode} />
-      {:else}
-        no code is provided
-      {/if}
-    </div>
-    <Button class={button({ class: buttonClass })} onclick={handleCopyClick}>Copy</Button>
-    {#if showExpandButton}
-      <button
-        onclick={handleExpandClick}
-        type="button"
-        class="hover:text-primary-700 absolute start-0 bottom-0 w-full border-t border-gray-200 bg-gray-100 px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
-      >
-        {expand ? "Collapse code" : "Expand code"}
-      </button>
-    {/if}
-  </div>
-</div>
diff --git a/src/routes/utils/theme.ts b/src/routes/utils/theme.ts
index 6a7cf4c4e9..5030287ef7 100644
--- a/src/routes/utils/theme.ts
+++ b/src/routes/utils/theme.ts
@@ -1,19 +1,5 @@
 import { tv } from "tailwind-variants";
 
-export const highlightcompo = tv({
-  slots: {
-    base: "max-w-4xl rounded bg-gray-50 dark:bg-gray-700",
-    badge: "absolute -top-8 right-[8px]",
-    button: "absolute right-2 top-2 rounded px-2 py-1 bg-primary-800 text-white"
-  },
-  variants: {
-    expanded: {
-      true: { base: "min-h-full" },
-      false: { base: "" }
-    }
-  }
-});
-
 export const codewrapper = tv({
   slots: {
     base: "max-w-4xl rounded-md border border-gray-200 bg-white bg-gradient-to-r dark:border-gray-600 dark:bg-gray-950",