diff --git a/apps/registry/components/component-preview/component-preview.tsx b/apps/registry/components/component-preview/component-preview.tsx
index d3bf3011..272e463e 100644
--- a/apps/registry/components/component-preview/component-preview.tsx
+++ b/apps/registry/components/component-preview/component-preview.tsx
@@ -2139,7 +2139,7 @@ function SpinnerPreview() {
 }
 
 // eslint-disable-next-line max-lines-per-function -- Switch statement mapping all components
-export function ComponentPreview({ componentName }: ComponentPreviewProps) {
+function getComponentPreview(componentName: string): React.ReactNode {
   switch (componentName) {
     case "accordion":
       return <AccordionPreview />;
@@ -2483,3 +2483,7 @@ export function ComponentPreview({ componentName }: ComponentPreviewProps) {
       return <div className="text-muted-foreground">Preview not available</div>;
   }
 }
+
+export function ComponentPreview({ componentName }: ComponentPreviewProps) {
+  return getComponentPreview(componentName);
+}
diff --git a/apps/registry/components/header/header.tsx b/apps/registry/components/header/header.tsx
index 54842b4b..7ae762cc 100644
--- a/apps/registry/components/header/header.tsx
+++ b/apps/registry/components/header/header.tsx
@@ -13,7 +13,7 @@ type Registry = {
 };
 
 export function Header() {
-  const router = useRouter();
+  const { push } = useRouter();
   const registry = registryData as Registry;
 
   const navItems = [
@@ -42,7 +42,7 @@ export function Header() {
             groupHeading="Components"
             items={searchItems}
             onSelect={(item) => {
-              router.push(`/components/${item.id}`);
+              push(`/components/${item.id}`);
             }}
             searchPlaceholder="Search components..."
           />
diff --git a/apps/registry/registry.json b/apps/registry/registry.json
index 029360c6..c174df5e 100644
--- a/apps/registry/registry.json
+++ b/apps/registry/registry.json
@@ -4492,5 +4492,5 @@
     }
   ],
   "version": "0.2.1",
-  "generatedAt": "2026-05-10T19:14:31.709Z"
+  "generatedAt": "2026-05-15T12:39:44.318Z"
 }
diff --git a/apps/registry/registry/default/canvas-shell/canvas-shell.tsx b/apps/registry/registry/default/canvas-shell/canvas-shell.tsx
index 85e689ce..812fbfbf 100644
--- a/apps/registry/registry/default/canvas-shell/canvas-shell.tsx
+++ b/apps/registry/registry/default/canvas-shell/canvas-shell.tsx
@@ -111,6 +111,15 @@ function getSafeAreaStyle(
   } satisfies CanvasShellSafeAreaStyle;
 }
 
+function getCanvasShellContentStyle(): CSSProperties {
+  return {
+    paddingBottom: "var(--canvas-shell-safe-bottom)",
+    paddingLeft: "var(--canvas-shell-safe-left)",
+    paddingRight: "var(--canvas-shell-safe-right)",
+    paddingTop: "var(--canvas-shell-safe-top)",
+  } satisfies CSSProperties;
+}
+
 const hasChromeContent = Boolean;
 
 type CanvasShellChromeAfterProps = Pick<
@@ -235,10 +244,15 @@ function renderLegacyCanvasShell(
   );
 }
 
-function renderFloatingContent(
-  children: ReactNode,
-  contentStyle: CSSProperties,
-) {
+type CanvasShellFloatingContentProps = {
+  children?: ReactNode;
+  contentStyle: CSSProperties;
+};
+
+function CanvasShellFloatingContent({
+  children,
+  contentStyle,
+}: CanvasShellFloatingContentProps) {
   return (
     <div
       className="relative z-0 h-full w-full min-h-0 min-w-0"
@@ -291,12 +305,7 @@ function renderFloatingCanvasShell(
     ...getSafeAreaStyle(safeAreaInsets),
     ...style,
   } satisfies CSSProperties;
-  const contentStyle = {
-    paddingBottom: "var(--canvas-shell-safe-bottom)",
-    paddingLeft: "var(--canvas-shell-safe-left)",
-    paddingRight: "var(--canvas-shell-safe-right)",
-    paddingTop: "var(--canvas-shell-safe-top)",
-  } satisfies CSSProperties;
+  const contentStyle = getCanvasShellContentStyle();
 
   return (
     <section
@@ -314,7 +323,9 @@ function renderFloatingCanvasShell(
         leftBar={hasLeftBar ? resolvedLeftBar : undefined}
         topBar={hasTopBar ? topBar : undefined}
       />
-      {renderFloatingContent(children, contentStyle)}
+      <CanvasShellFloatingContent contentStyle={contentStyle}>
+        {children}
+      </CanvasShellFloatingContent>
       <CanvasShellChromeAfter
         bottomBar={hasBottomBar ? resolvedBottomBar : undefined}
         inset={inset}
diff --git a/apps/registry/registry/default/carousel/carousel.tsx b/apps/registry/registry/default/carousel/carousel.tsx
index 01918acb..73f00652 100644
--- a/apps/registry/registry/default/carousel/carousel.tsx
+++ b/apps/registry/registry/default/carousel/carousel.tsx
@@ -74,15 +74,6 @@ function useCarouselLogic({
   const [canScrollPrevious, setCanScrollPrevious] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
 
-  const onSelect = useCallback((api: CarouselApi) => {
-    if (!api) {
-      return;
-    }
-
-    setCanScrollPrevious(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
   const scrollPrevious = useCallback(() => {
     api?.scrollPrev();
   }, [api]);
@@ -117,19 +108,28 @@ function useCarouselLogic({
       return;
     }
 
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+    const updateScrollButtons = (currentApi: CarouselApi) => {
+      if (!currentApi) {
+        return;
+      }
+
+      setCanScrollPrevious(currentApi.canScrollPrev());
+      setCanScrollNext(currentApi.canScrollNext());
+    };
+
+    api.on("reInit", updateScrollButtons);
+    api.on("select", updateScrollButtons);
 
     const rafId = requestAnimationFrame(() => {
-      onSelect(api);
+      updateScrollButtons(api);
     });
 
     return () => {
-      api?.off("select", onSelect);
-      api?.off("reInit", onSelect);
+      api?.off("select", updateScrollButtons);
+      api?.off("reInit", updateScrollButtons);
       cancelAnimationFrame(rafId);
     };
-  }, [api, onSelect]);
+  }, [api]);
 
   return {
     api,
diff --git a/apps/registry/registry/default/code-block/code-block.tsx b/apps/registry/registry/default/code-block/code-block.tsx
index b4e3e961..35c1d40f 100644
--- a/apps/registry/registry/default/code-block/code-block.tsx
+++ b/apps/registry/registry/default/code-block/code-block.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { Children, isValidElement, useState } from "react";
 
 import { Check, Copy } from "lucide-react";
 import { useTheme } from "next-themes";
+import type { ReactNode, WheelEvent } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
@@ -14,33 +15,25 @@ import { cn } from "@vllnt/ui";
 import { Button } from "@vllnt/ui";
 
 type CodeBlockProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
+  code?: string;
   language?: string;
   showLanguage?: boolean;
 };
 
-function extractTextFromChildren(children: ReactNode): string {
-  if (typeof children === "string") {
-    return children;
-  }
-  if (typeof children === "number") {
-    return String(children);
-  }
-  if (Array.isArray(children)) {
-    return children.map(extractTextFromChildren).join("");
-  }
-  if (
-    children &&
-    typeof children === "object" &&
-    "props" in children &&
-    children.props &&
-    typeof children.props === "object" &&
-    "children" in children.props
-  ) {
-    return extractTextFromChildren(children.props.children as ReactNode);
-  }
-  return String(children ?? "");
+export function extractTextFromChildren(children: ReactNode): string {
+  return Children.toArray(children)
+    .map((child) => {
+      if (typeof child === "string" || typeof child === "number") {
+        return String(child);
+      }
+      if (isValidElement<{ children?: ReactNode }>(child)) {
+        return extractTextFromChildren(child.props.children);
+      }
+      return "";
+    })
+    .join("");
 }
 
 function findScrollableParent(
@@ -51,9 +44,19 @@ function findScrollableParent(
   return findScrollableParent(element.parentElement);
 }
 
+function redirectVerticalWheel(event: WheelEvent<HTMLDivElement>): void {
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+  const scrollable = findScrollableParent(event.currentTarget);
+  if (scrollable) {
+    scrollable.scrollTop += event.deltaY;
+    event.preventDefault();
+  }
+}
+
 export function CodeBlock({
   children,
   className,
+  code: codeProperty,
   language = "typescript",
   showLanguage = false,
 }: CodeBlockProps) {
@@ -63,28 +66,7 @@ export function CodeBlock({
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   const isDark = resolvedTheme !== "light";
   const codeStyle = isDark ? oneDark : oneLight;
-  const code = extractTextFromChildren(children);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const element = scrollRef.current;
-    if (!element) return;
-
-    const onWheel = (event: WheelEvent) => {
-      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
-      const scrollable = findScrollableParent(element);
-      if (scrollable) {
-        scrollable.scrollTop += event.deltaY;
-        event.preventDefault();
-      }
-    };
-
-    element.addEventListener("wheel", onWheel, { passive: false });
-    return () => {
-      element.removeEventListener("wheel", onWheel);
-    };
-  }, []);
+  const code = codeProperty ?? extractTextFromChildren(children);
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
@@ -103,7 +85,7 @@ export function CodeBlock({
     >
       <div
         className="relative overflow-x-auto overflow-y-hidden touch-pan-y"
-        ref={scrollRef}
+        onWheel={redirectVerticalWheel}
       >
         <SyntaxHighlighter
           codeTagProps={{
diff --git a/apps/registry/registry/default/code-playground/code-playground.tsx b/apps/registry/registry/default/code-playground/code-playground.tsx
index 5c73d102..8ce1d7b6 100644
--- a/apps/registry/registry/default/code-playground/code-playground.tsx
+++ b/apps/registry/registry/default/code-playground/code-playground.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { Children, isValidElement, useState } from "react";
 
 import { Check, Code, Copy, FileCode } from "lucide-react";
 import type { ReactNode } from "react";
@@ -27,7 +27,8 @@ function CodeLine({ highlightLines, line, lineNumber }: CodeLineProps) {
 }
 
 export type CodePlaygroundProps = {
-  children: ReactNode;
+  children?: ReactNode;
+  code?: string;
   description?: string;
   filename?: string;
   highlightLines?: number[];
@@ -38,8 +39,23 @@ export type CodePlaygroundProps = {
 
 const EMPTY_HIGHLIGHT_LINES: number[] = [];
 
+function extractTextFromChildren(children: ReactNode): string {
+  return Children.toArray(children)
+    .map((child) => {
+      if (typeof child === "string" || typeof child === "number") {
+        return String(child);
+      }
+      if (isValidElement<{ children?: ReactNode }>(child)) {
+        return extractTextFromChildren(child.props.children);
+      }
+      return "";
+    })
+    .join("");
+}
+
 export function CodePlayground({
   children,
+  code: codeProperty,
   description,
   filename,
   highlightLines = EMPTY_HIGHLIGHT_LINES,
@@ -48,7 +64,7 @@ export function CodePlayground({
   title,
 }: CodePlaygroundProps) {
   const [copied, setCopied] = useState(false);
-  const code = typeof children === "string" ? children : "";
+  const code = codeProperty ?? extractTextFromChildren(children);
   const lines = code.split("\n");
 
   const handleCopy = async () => {
diff --git a/apps/registry/registry/default/completion-dialog/completion-dialog.tsx b/apps/registry/registry/default/completion-dialog/completion-dialog.tsx
index f3c4f334..62dc4a38 100644
--- a/apps/registry/registry/default/completion-dialog/completion-dialog.tsx
+++ b/apps/registry/registry/default/completion-dialog/completion-dialog.tsx
@@ -4,6 +4,7 @@ import { memo, useCallback, useEffect, useRef } from "react";
 
 import type { ReactNode } from "react";
 
+import { useDocumentEventListener } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { Button } from "@vllnt/ui";
 
@@ -152,13 +153,7 @@ function CompletionDialogImpl({
     [isOpen, onClose, onConfirm, onCancel, confirmShortcut, cancelShortcut],
   );
 
-  useEffect(() => {
-    if (!isOpen) return;
-    document.addEventListener("keydown", handleKeyDown, true);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    };
-  }, [isOpen, handleKeyDown]);
+  useDocumentEventListener("keydown", handleKeyDown, true);
 
   if (!isOpen) return null;
 
diff --git a/apps/registry/registry/default/content-intro/content-intro.tsx b/apps/registry/registry/default/content-intro/content-intro.tsx
index 0996a51b..acd60e18 100644
--- a/apps/registry/registry/default/content-intro/content-intro.tsx
+++ b/apps/registry/registry/default/content-intro/content-intro.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { memo, useCallback, useEffect } from "react";
+import { memo, useCallback } from "react";
 
 import type { ReactNode } from "react";
 
+import { useDocumentEventListener } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { Button } from "@vllnt/ui";
 
@@ -25,6 +26,8 @@ export type ContentIntroProps = {
   completedSections: Set<string>;
   /** Estimated time to complete */
   estimatedTime: string;
+  /** Rendered introduction content */
+  introContent?: ReactNode;
   /** Is loading progress */
   isLoading?: boolean;
   /** Labels for i18n */
@@ -33,8 +36,8 @@ export type ContentIntroProps = {
   onGoToSection: (index: number) => void;
   /** Callback when starting */
   onStart: () => void;
-  /** Render function for intro content */
-  renderIntroContent: () => ReactNode;
+  /** Render prop used by existing consumers to provide introduction content */
+  renderIntroContent?: () => ReactNode;
   /** Sections for TOC */
   sections: ContentIntroSection[];
   /** Intro section title */
@@ -54,6 +57,7 @@ function ContentIntroImpl({
   additionalContent,
   completedSections,
   estimatedTime,
+  introContent,
   isLoading = false,
   labels = EMPTY_CONTENT_INTRO_LABELS,
   onGoToSection,
@@ -64,6 +68,7 @@ function ContentIntroImpl({
 }: ContentIntroProps): React.ReactNode {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const hasProgress = completedSections.size > 0;
+  const renderedIntroContent = introContent ?? renderIntroContent?.();
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
@@ -75,12 +80,7 @@ function ContentIntroImpl({
     [onStart],
   );
 
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleKeyDown]);
+  useDocumentEventListener("keydown", handleKeyDown);
 
   return (
     <>
@@ -89,7 +89,7 @@ function ContentIntroImpl({
         <section className="py-6">
           <h2 className="text-2xl md:text-3xl font-semibold mb-6">{title}</h2>
           <div className={cn("max-w-none", "[&_h2:first-of-type]:hidden")}>
-            {renderIntroContent()}
+            {renderedIntroContent}
           </div>
         </section>
 
diff --git a/apps/registry/registry/default/mdx-content/mdx-content.tsx b/apps/registry/registry/default/mdx-content/mdx-content.tsx
index fe098d1a..3034bc0f 100644
--- a/apps/registry/registry/default/mdx-content/mdx-content.tsx
+++ b/apps/registry/registry/default/mdx-content/mdx-content.tsx
@@ -1,3 +1,5 @@
+import { Children } from "react";
+
 import { evaluate } from "@mdx-js/mdx";
 import type React from "react";
 import * as runtime from "react/jsx-runtime";
@@ -33,10 +35,7 @@ const MDXComponents: Components = {
   code: ({ children, className, ...props }: React.ComponentProps<"code">) => {
     if (typeof className === "string" && className.startsWith("language-")) {
       const language = className.replace(/^language-/, "");
-      const text =
-        typeof children === "string"
-          ? children.replace(/\n$/, "")
-          : String(children ?? "");
+      const text = Children.toArray(children).join("").replace(/\n$/, "");
       return <CodeBlock language={language}>{text}</CodeBlock>;
     }
     return (
diff --git a/apps/registry/registry/default/search-bar/search-bar.tsx b/apps/registry/registry/default/search-bar/search-bar.tsx
index bfa5b895..f230d50f 100644
--- a/apps/registry/registry/default/search-bar/search-bar.tsx
+++ b/apps/registry/registry/default/search-bar/search-bar.tsx
@@ -51,9 +51,11 @@ function SearchBarInner({
   onSearch,
   placeholder = "Search posts...",
 }: SearchBarProps) {
-  const router = useRouter();
+  const { replace } = useRouter();
   const searchParameters = useSearchParams();
-  const initialQuery = searchParameters.get("search") ?? "";
+  const searchParametersString = searchParameters.toString();
+  const initialQuery =
+    new URLSearchParams(searchParametersString).get("search") ?? "";
   const [query, setQuery] = useState(initialQuery);
   const debouncedQuery = useDebounce(query, 300);
   const isInitialMount = useRef(true);
@@ -66,7 +68,8 @@ function SearchBarInner({
   // Sync query with URL search params (e.g., on browser back/forward)
   // Sync when user is not actively typing and URL changed externally
   useEffect(() => {
-    const searchParameter = searchParameters.get("search") ?? "";
+    const searchParameter =
+      new URLSearchParams(searchParametersString).get("search") ?? "";
 
     // Skip if this is the search param we set ourselves
     if (searchParameter === lastSetSearchParameterReference.current) {
@@ -80,7 +83,7 @@ function SearchBarInner({
         lastDebouncedQueryReference.current = searchParameter;
       });
     }
-  }, [searchParameters, query]); // Include query to properly sync state
+  }, [searchParametersString, query]); // Include query to properly sync state
 
   // Update URL when debounced query changes
   useEffect(() => {
@@ -108,7 +111,8 @@ function SearchBarInner({
     }
 
     // Check current URL to avoid unnecessary updates
-    const currentUrlParameter = searchParameters.get("search") ?? "";
+    const parameters = new URLSearchParams(searchParametersString);
+    const currentUrlParameter = parameters.get("search") ?? "";
 
     // Skip if URL already matches the debounced query
     if (trimmedQuery === currentUrlParameter) {
@@ -116,7 +120,6 @@ function SearchBarInner({
       return;
     }
 
-    const parameters = new URLSearchParams(searchParameters);
     if (trimmedQuery) {
       parameters.set("search", trimmedQuery);
     } else {
@@ -129,8 +132,8 @@ function SearchBarInner({
     // nextjs-no-client-side-redirect rule targets window.location
     // hard redirects, not Next router.replace — but ESLint doesn't
     // know that rule, so we don't add an eslint-disable for it.
-    router.replace(`?${newUrl}`);
-  }, [debouncedQuery, router, onSearch, searchParameters]);
+    replace(`?${newUrl}`);
+  }, [debouncedQuery, onSearch, replace, searchParametersString]);
 
   // Cleanup timeout on unmount
   useEffect(() => {
@@ -169,7 +172,7 @@ function SearchBarInner({
     if (onSearch) {
       onSearch(trimmedQuery);
     } else {
-      const parameters = new URLSearchParams(searchParameters);
+      const parameters = new URLSearchParams(searchParametersString);
       if (trimmedQuery) {
         parameters.set("search", trimmedQuery);
       } else {
@@ -177,7 +180,7 @@ function SearchBarInner({
       }
       const newUrl = parameters.toString();
       lastSetSearchParameterReference.current = trimmedQuery;
-      router.replace(`?${newUrl}`);
+      replace(`?${newUrl}`);
     }
   };
 
diff --git a/apps/registry/registry/default/sidebar/sidebar.tsx b/apps/registry/registry/default/sidebar/sidebar.tsx
index 915e1f65..3a19f139 100644
--- a/apps/registry/registry/default/sidebar/sidebar.tsx
+++ b/apps/registry/registry/default/sidebar/sidebar.tsx
@@ -66,7 +66,7 @@ function useScrollFade(
     };
 
     checkScroll();
-    container.addEventListener("scroll", checkScroll);
+    container.addEventListener("scroll", checkScroll, { passive: true });
     return () => {
       container.removeEventListener("scroll", checkScroll);
     };
diff --git a/apps/registry/registry/default/slideshow/slideshow.tsx b/apps/registry/registry/default/slideshow/slideshow.tsx
index 7f5914ce..4f79671c 100644
--- a/apps/registry/registry/default/slideshow/slideshow.tsx
+++ b/apps/registry/registry/default/slideshow/slideshow.tsx
@@ -2,9 +2,10 @@
 
 import { memo, useCallback, useEffect, useState } from "react";
 
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 import { createPortal } from "react-dom";
 
+import { useDocumentEventListener } from "@vllnt/ui";
 import { useMounted } from "@vllnt/ui";
 import { cn } from "@vllnt/ui";
 import { CompletionDialog } from "@vllnt/ui";
@@ -14,6 +15,10 @@ export type SlideshowSection = {
   title: string;
 };
 
+export type SlideshowSectionContentProps = {
+  section: SlideshowSection;
+};
+
 export type SlideshowLabels = {
   closeLabel?: string;
   closeTocLabel?: string;
@@ -42,8 +47,10 @@ export type SlideshowProps = {
   onNavigate: (index: number) => void;
   /** Callback to toggle section completion */
   onToggleSection: (sectionId: string) => void;
-  /** Render function for section content */
-  renderContent: (section: SlideshowSection) => ReactNode;
+  /** Render prop used by existing consumers to render the current section content */
+  renderContent?: (section: SlideshowSection) => ReactNode;
+  /** Component used to render the current section content */
+  SectionContent?: ComponentType<SlideshowSectionContentProps>;
   /** Sections to display */
   sections: SlideshowSection[];
   /** Tutorial title */
@@ -63,6 +70,326 @@ const DEFAULT_LABELS: Required<SlideshowLabels> = {
 
 const EMPTY_SLIDESHOW_LABELS: SlideshowLabels = {};
 
+type MergedSlideshowLabels = Required<SlideshowLabels>;
+
+type SlideshowHeaderProps = {
+  currentIndex: number;
+  currentSection: SlideshowSection;
+  isTocOpen: boolean;
+  labels: MergedSlideshowLabels;
+  onExit: () => void;
+  onToggleToc: () => void;
+  sectionCount: number;
+  title: string;
+};
+
+function SlideshowHeader({
+  currentIndex,
+  currentSection,
+  isTocOpen,
+  labels,
+  onExit,
+  onToggleToc,
+  sectionCount,
+  title,
+}: SlideshowHeaderProps): ReactNode {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 mt-1 border-b border-border bg-background">
+      <div className="flex items-center gap-3 min-w-0 flex-1">
+        <button
+          aria-label={isTocOpen ? labels.closeTocLabel : labels.openTocLabel}
+          className="flex-shrink-0 p-2 rounded-lg hover:bg-muted transition-colors"
+          onClick={onToggleToc}
+          type="button"
+        >
+          {isTocOpen ? (
+            <svg
+              className="size-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M6 18L18 6M6 6l12 12"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          ) : (
+            <svg
+              className="size-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M4 6h16M4 12h16M4 18h16"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          )}
+        </button>
+        <div className="min-w-0 flex-1">
+          <p className="text-xs text-muted-foreground truncate">{title}</p>
+          <p className="text-sm font-medium truncate">{currentSection.title}</p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 flex-shrink-0">
+        <span className="text-xs text-muted-foreground tabular-nums hidden sm:inline">
+          {currentIndex + 1}/{sectionCount}
+        </span>
+        <button
+          aria-label={labels.exitLabel}
+          className="p-2 rounded-lg hover:bg-muted transition-colors"
+          onClick={onExit}
+          type="button"
+        >
+          <svg
+            className="size-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M6 18L18 6M6 6l12 12"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+type SlideshowTableOfContentsProps = {
+  completedSections: Set<string>;
+  currentIndex: number;
+  isOpen: boolean;
+  labels: MergedSlideshowLabels;
+  onClose: () => void;
+  onNavigate: (index: number) => void;
+  sections: SlideshowSection[];
+};
+
+function SlideshowTableOfContents({
+  completedSections,
+  currentIndex,
+  isOpen,
+  labels,
+  onClose,
+  onNavigate,
+  sections,
+}: SlideshowTableOfContentsProps): ReactNode {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="absolute inset-0 z-20 flex animate-in fade-in-0 duration-200"
+      onClick={onClose}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") onClose();
+      }}
+      role="button"
+      tabIndex={0}
+    >
+      <div className="absolute inset-0 bg-background/40" />
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+      <div
+        className="relative w-full sm:max-w-sm bg-background border-r border-border h-full overflow-auto shadow-2xl"
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+        onKeyDown={(event) => {
+          event.stopPropagation();
+        }}
+        role="dialog"
+      >
+        <div className="sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background">
+          <h3 className="font-semibold">{labels.sectionsLabel}</h3>
+          <button
+            aria-label={labels.closeLabel}
+            className="p-2 rounded-lg hover:bg-muted transition-colors"
+            onClick={onClose}
+            type="button"
+          >
+            <svg
+              className="size-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M6 18L18 6M6 6l12 12"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="p-2">
+          {sections.map((section, index) => {
+            const isCompleted = completedSections.has(section.id);
+            const isCurrent = index === currentIndex;
+            return (
+              <button
+                className={cn(
+                  "w-full flex items-center gap-3 p-3 rounded-lg text-left transition-colors",
+                  isCurrent ? "bg-muted" : "hover:bg-muted/50",
+                )}
+                key={section.id}
+                onClick={() => {
+                  onNavigate(index);
+                }}
+                type="button"
+              >
+                <div
+                  className={cn(
+                    "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
+                    isCompleted
+                      ? "bg-foreground border-foreground"
+                      : "border-muted-foreground",
+                  )}
+                >
+                  {isCompleted ? (
+                    <svg
+                      className="size-3 text-background"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M5 13l4 4L19 7"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                      />
+                    </svg>
+                  ) : null}
+                </div>
+                <span
+                  className={cn(
+                    "flex-1 text-sm truncate",
+                    isCompleted && "line-through opacity-60",
+                  )}
+                >
+                  {section.title}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type SlideshowContentProps = {
+  animationDirection: "left" | "right" | null;
+  currentSection: SlideshowSection;
+  renderContent?: (section: SlideshowSection) => ReactNode;
+  SectionContent?: ComponentType<SlideshowSectionContentProps>;
+};
+
+function SlideshowContent({
+  animationDirection,
+  currentSection,
+  renderContent,
+  SectionContent,
+}: SlideshowContentProps): ReactNode {
+  const content = SectionContent ? (
+    <SectionContent section={currentSection} />
+  ) : (
+    renderContent?.(currentSection)
+  );
+
+  return (
+    <div className="h-full overflow-auto px-4 py-8 md:px-8 lg:px-16">
+      <div className="mx-auto max-w-3xl">
+        <div
+          className={cn(
+            "transition-all duration-150 ease-out",
+            animationDirection === "left" && "opacity-0 -translate-x-4",
+            animationDirection === "right" && "opacity-0 translate-x-4",
+            !animationDirection && "opacity-100 translate-x-0",
+          )}
+        >
+          {content}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type SlideshowBottomNavProps = {
+  canGoPrevious: boolean;
+  isLastSection: boolean;
+  labels: MergedSlideshowLabels;
+  onNext: () => void;
+  onPrevious: () => void;
+};
+
+function SlideshowBottomNav({
+  canGoPrevious,
+  isLastSection,
+  labels,
+  onNext,
+  onPrevious,
+}: SlideshowBottomNavProps): ReactNode {
+  return (
+    <div className="relative z-20 flex items-center justify-between p-4 border-t border-border bg-background">
+      <button
+        className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
+        disabled={!canGoPrevious}
+        onClick={onPrevious}
+        type="button"
+      >
+        <svg
+          className="size-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="m15 19-7-7 7-7"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+          />
+        </svg>
+        <span>{labels.prevLabel}</span>
+      </button>
+      <button
+        className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md bg-foreground text-background hover:bg-foreground/90 transition-colors"
+        onClick={onNext}
+        type="button"
+      >
+        <span>{isLastSection ? labels.finishLabel : labels.nextLabel}</span>
+        {!isLastSection && (
+          <svg
+            className="size-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="m9 5 7 7-7 7"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+            />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}
+
 function SlideshowImpl({
   completedSections,
   completionDialogTitle = "Mark section as complete?",
@@ -73,9 +400,10 @@ function SlideshowImpl({
   onNavigate,
   onToggleSection,
   renderContent,
+  SectionContent,
   sections,
   title,
-}: SlideshowProps): React.ReactNode {
+}: SlideshowProps): ReactNode {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const [animationDirection, setAnimationDirection] = useState<
     "left" | "right" | null
@@ -153,8 +481,8 @@ function SlideshowImpl({
     [currentIndex, goToSection],
   );
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent): void => {
+  const handleSlideshowKeyDown = useCallback(
+    (event: KeyboardEvent): void => {
       if (isCompletionDialogOpen) return;
       if (event.key === "Escape") {
         event.preventDefault();
@@ -164,7 +492,7 @@ function SlideshowImpl({
       }
       if (event.key === "t" || event.key === "T") {
         event.preventDefault();
-        setIsTocOpen((p) => !p);
+        setIsTocOpen((previous) => !previous);
         return;
       }
       if (event.key === "ArrowRight" || event.key === "j") {
@@ -176,12 +504,11 @@ function SlideshowImpl({
         event.preventDefault();
         handlePrevious();
       }
-    };
-    document.addEventListener("keydown", handleKeyDown, true);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    };
-  }, [handleNext, handlePrevious, onExit, isTocOpen, isCompletionDialogOpen]);
+    },
+    [handleNext, handlePrevious, isCompletionDialogOpen, isTocOpen, onExit],
+  );
+
+  useDocumentEventListener("keydown", handleSlideshowKeyDown, true);
 
   if (!currentSection || !mounted) return null;
 
@@ -195,256 +522,49 @@ function SlideshowImpl({
         />
       </div>
 
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 mt-1 border-b border-border bg-background">
-        <div className="flex items-center gap-3 min-w-0 flex-1">
-          <button
-            aria-label={
-              isTocOpen ? mergedLabels.closeTocLabel : mergedLabels.openTocLabel
-            }
-            className="flex-shrink-0 p-2 rounded-lg hover:bg-muted transition-colors"
-            onClick={() => {
-              setIsTocOpen((p) => !p);
-            }}
-            type="button"
-          >
-            {isTocOpen ? (
-              <svg
-                className="size-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M6 18L18 6M6 6l12 12"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                />
-              </svg>
-            ) : (
-              <svg
-                className="size-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M4 6h16M4 12h16M4 18h16"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                />
-              </svg>
-            )}
-          </button>
-          <div className="min-w-0 flex-1">
-            <p className="text-xs text-muted-foreground truncate">{title}</p>
-            <p className="text-sm font-medium truncate">
-              {currentSection.title}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 flex-shrink-0">
-          <span className="text-xs text-muted-foreground tabular-nums hidden sm:inline">
-            {currentIndex + 1}/{sections.length}
-          </span>
-          <button
-            aria-label={mergedLabels.exitLabel}
-            className="p-2 rounded-lg hover:bg-muted transition-colors"
-            onClick={onExit}
-            type="button"
-          >
-            <svg
-              className="size-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M6 18L18 6M6 6l12 12"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
+      <SlideshowHeader
+        currentIndex={currentIndex}
+        currentSection={currentSection}
+        isTocOpen={isTocOpen}
+        labels={mergedLabels}
+        onExit={onExit}
+        onToggleToc={() => {
+          setIsTocOpen((previous) => !previous);
+        }}
+        sectionCount={sections.length}
+        title={title}
+      />
 
       {/* Content */}
       <div className="relative flex-1 overflow-hidden">
-        {isTocOpen ? (
-          <div
-            className="absolute inset-0 z-20 flex animate-in fade-in-0 duration-200"
-            onClick={() => {
-              setIsTocOpen(false);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" || event.key === " ")
-                setIsTocOpen(false);
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            <div className="absolute inset-0 bg-background/40" />
-            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-            <div
-              className="relative w-full sm:max-w-sm bg-background border-r border-border h-full overflow-auto shadow-2xl"
-              onClick={(event) => {
-                event.stopPropagation();
-              }}
-              onKeyDown={(event) => {
-                event.stopPropagation();
-              }}
-              role="dialog"
-            >
-              <div className="sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background">
-                <h3 className="font-semibold">{mergedLabels.sectionsLabel}</h3>
-                <button
-                  aria-label={mergedLabels.closeLabel}
-                  className="p-2 rounded-lg hover:bg-muted transition-colors"
-                  onClick={() => {
-                    setIsTocOpen(false);
-                  }}
-                  type="button"
-                >
-                  <svg
-                    className="size-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 18L18 6M6 6l12 12"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div className="p-2">
-                {sections.map((section, index) => {
-                  const isCompleted = completedSections.has(section.id);
-                  const isCurrent = index === currentIndex;
-                  return (
-                    <button
-                      className={cn(
-                        "w-full flex items-center gap-3 p-3 rounded-lg text-left transition-colors",
-                        isCurrent ? "bg-muted" : "hover:bg-muted/50",
-                      )}
-                      key={section.id}
-                      onClick={() => {
-                        handleTocNavigate(index);
-                      }}
-                      type="button"
-                    >
-                      <div
-                        className={cn(
-                          "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
-                          isCompleted
-                            ? "bg-foreground border-foreground"
-                            : "border-muted-foreground",
-                        )}
-                      >
-                        {isCompleted ? (
-                          <svg
-                            className="size-3 text-background"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M5 13l4 4L19 7"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                            />
-                          </svg>
-                        ) : null}
-                      </div>
-                      <span
-                        className={cn(
-                          "flex-1 text-sm truncate",
-                          isCompleted && "line-through opacity-60",
-                        )}
-                      >
-                        {section.title}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        ) : null}
-
-        <div className="h-full overflow-auto px-4 py-8 md:px-8 lg:px-16">
-          <div className="mx-auto max-w-3xl">
-            <div
-              className={cn(
-                "transition-all duration-150 ease-out",
-                animationDirection === "left" && "opacity-0 -translate-x-4",
-                animationDirection === "right" && "opacity-0 translate-x-4",
-                !animationDirection && "opacity-100 translate-x-0",
-              )}
-            >
-              {renderContent(currentSection)}
-            </div>
-          </div>
-        </div>
-      </div>
+        <SlideshowTableOfContents
+          completedSections={completedSections}
+          currentIndex={currentIndex}
+          isOpen={isTocOpen}
+          labels={mergedLabels}
+          onClose={() => {
+            setIsTocOpen(false);
+          }}
+          onNavigate={handleTocNavigate}
+          sections={sections}
+        />
 
-      {/* Bottom Nav */}
-      <div className="relative z-20 flex items-center justify-between p-4 border-t border-border bg-background">
-        <button
-          className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
-          disabled={!canGoPrevious}
-          onClick={handlePrevious}
-          type="button"
-        >
-          <svg
-            className="size-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="m15 19-7-7 7-7"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-            />
-          </svg>
-          <span>{mergedLabels.prevLabel}</span>
-        </button>
-        <button
-          className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md bg-foreground text-background hover:bg-foreground/90 transition-colors"
-          onClick={handleNext}
-          type="button"
-        >
-          <span>
-            {isLastSection ? mergedLabels.finishLabel : mergedLabels.nextLabel}
-          </span>
-          {!isLastSection && (
-            <svg
-              className="size-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="m9 5 7 7-7 7"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-              />
-            </svg>
-          )}
-        </button>
+        <SlideshowContent
+          animationDirection={animationDirection}
+          currentSection={currentSection}
+          renderContent={renderContent}
+          SectionContent={SectionContent}
+        />
       </div>
 
+      <SlideshowBottomNav
+        canGoPrevious={canGoPrevious}
+        isLastSection={isLastSection}
+        labels={mergedLabels}
+        onNext={handleNext}
+        onPrevious={handlePrevious}
+      />
+
       <CompletionDialog
         description={`You're about to ${isLastSection ? "finish" : "move to the next section from"}: ${currentSection.title}`}
         isOpen={isCompletionDialogOpen}
diff --git a/apps/registry/registry/default/view-switcher/view-switcher.tsx b/apps/registry/registry/default/view-switcher/view-switcher.tsx
index 7854c955..0e7fbe8d 100644
--- a/apps/registry/registry/default/view-switcher/view-switcher.tsx
+++ b/apps/registry/registry/default/view-switcher/view-switcher.tsx
@@ -24,22 +24,25 @@ function ViewSwitcherInner({
   options,
   paramName: parameterName = "view",
 }: ViewSwitcherProps) {
-  const router = useRouter();
+  const { push } = useRouter();
   const pathname = usePathname();
   const searchParameters = useSearchParams();
+  const searchParametersString = searchParameters.toString();
 
   const resolvedDefault = defaultKey ?? options[0]?.key ?? "";
-  const currentKey = searchParameters.get(parameterName) ?? resolvedDefault;
+  const currentKey =
+    new URLSearchParams(searchParametersString).get(parameterName) ??
+    resolvedDefault;
 
   function handleSelect(key: string): void {
-    const parameters = new URLSearchParams(searchParameters.toString());
+    const parameters = new URLSearchParams(searchParametersString);
     if (key === resolvedDefault) {
       parameters.delete(parameterName);
     } else {
       parameters.set(parameterName, key);
     }
     const query = parameters.toString();
-    router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    push(query ? `${pathname}?${query}` : pathname, { scroll: false });
   }
 
   return (
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 18d96a27..26f0a1fd 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -33,6 +33,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 - Registry installs use a **hybrid CLI strategy** — leaf component source is inlined, sibling registry items resolve via `@vllnt/ui` to keep installs minimal and dedupe shared primitives.
 
+### Fixed
+
+- **Public API compatibility:** `ContentIntro` accepts legacy `renderIntroContent`, `Slideshow` accepts legacy `renderContent`, and `CodeBlock`/`CodePlayground` accept `ReactNode` children with text extraction while keeping additive explicit code props.
+
 ### Notes
 
 - `ROADMAP.md` added at repo root tracking 50 open issues across 8 phases gating the `0.3.0` cut.
diff --git a/packages/ui/src/components/canvas-shell/canvas-shell.tsx b/packages/ui/src/components/canvas-shell/canvas-shell.tsx
index 15f08ed1..2260a7ea 100644
--- a/packages/ui/src/components/canvas-shell/canvas-shell.tsx
+++ b/packages/ui/src/components/canvas-shell/canvas-shell.tsx
@@ -111,6 +111,15 @@ function getSafeAreaStyle(
   } satisfies CanvasShellSafeAreaStyle;
 }
 
+function getCanvasShellContentStyle(): CSSProperties {
+  return {
+    paddingBottom: "var(--canvas-shell-safe-bottom)",
+    paddingLeft: "var(--canvas-shell-safe-left)",
+    paddingRight: "var(--canvas-shell-safe-right)",
+    paddingTop: "var(--canvas-shell-safe-top)",
+  } satisfies CSSProperties;
+}
+
 const hasChromeContent = Boolean;
 
 type CanvasShellChromeAfterProps = Pick<
@@ -235,10 +244,15 @@ function renderLegacyCanvasShell(
   );
 }
 
-function renderFloatingContent(
-  children: ReactNode,
-  contentStyle: CSSProperties,
-) {
+type CanvasShellFloatingContentProps = {
+  children?: ReactNode;
+  contentStyle: CSSProperties;
+};
+
+function CanvasShellFloatingContent({
+  children,
+  contentStyle,
+}: CanvasShellFloatingContentProps) {
   return (
     <div
       className="relative z-0 h-full w-full min-h-0 min-w-0"
@@ -291,12 +305,7 @@ function renderFloatingCanvasShell(
     ...getSafeAreaStyle(safeAreaInsets),
     ...style,
   } satisfies CSSProperties;
-  const contentStyle = {
-    paddingBottom: "var(--canvas-shell-safe-bottom)",
-    paddingLeft: "var(--canvas-shell-safe-left)",
-    paddingRight: "var(--canvas-shell-safe-right)",
-    paddingTop: "var(--canvas-shell-safe-top)",
-  } satisfies CSSProperties;
+  const contentStyle = getCanvasShellContentStyle();
 
   return (
     <section
@@ -314,7 +323,9 @@ function renderFloatingCanvasShell(
         leftBar={hasLeftBar ? resolvedLeftBar : undefined}
         topBar={hasTopBar ? topBar : undefined}
       />
-      {renderFloatingContent(children, contentStyle)}
+      <CanvasShellFloatingContent contentStyle={contentStyle}>
+        {children}
+      </CanvasShellFloatingContent>
       <CanvasShellChromeAfter
         bottomBar={hasBottomBar ? resolvedBottomBar : undefined}
         inset={inset}
diff --git a/packages/ui/src/components/carousel/carousel.tsx b/packages/ui/src/components/carousel/carousel.tsx
index 65b41711..584fe75e 100644
--- a/packages/ui/src/components/carousel/carousel.tsx
+++ b/packages/ui/src/components/carousel/carousel.tsx
@@ -74,15 +74,6 @@ function useCarouselLogic({
   const [canScrollPrevious, setCanScrollPrevious] = useState(false);
   const [canScrollNext, setCanScrollNext] = useState(false);
 
-  const onSelect = useCallback((api: CarouselApi) => {
-    if (!api) {
-      return;
-    }
-
-    setCanScrollPrevious(api.canScrollPrev());
-    setCanScrollNext(api.canScrollNext());
-  }, []);
-
   const scrollPrevious = useCallback(() => {
     api?.scrollPrev();
   }, [api]);
@@ -117,19 +108,28 @@ function useCarouselLogic({
       return;
     }
 
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
+    const updateScrollButtons = (currentApi: CarouselApi) => {
+      if (!currentApi) {
+        return;
+      }
+
+      setCanScrollPrevious(currentApi.canScrollPrev());
+      setCanScrollNext(currentApi.canScrollNext());
+    };
+
+    api.on("reInit", updateScrollButtons);
+    api.on("select", updateScrollButtons);
 
     const rafId = requestAnimationFrame(() => {
-      onSelect(api);
+      updateScrollButtons(api);
     });
 
     return () => {
-      api?.off("select", onSelect);
-      api?.off("reInit", onSelect);
+      api?.off("select", updateScrollButtons);
+      api?.off("reInit", updateScrollButtons);
       cancelAnimationFrame(rafId);
     };
-  }, [api, onSelect]);
+  }, [api]);
 
   return {
     api,
diff --git a/packages/ui/src/components/code-block/code-block.mdx b/packages/ui/src/components/code-block/code-block.mdx
index 2f106818..21b84c3f 100644
--- a/packages/ui/src/components/code-block/code-block.mdx
+++ b/packages/ui/src/components/code-block/code-block.mdx
@@ -35,6 +35,8 @@ import { CodeBlock } from '@vllnt/ui'
 
 | Prop | Type | Required | Description |
 | ---- | ---- | -------- | ----------- |
+| `children` | `ReactNode` | No | Code content. Strings, numbers, arrays, and nested element text are extracted for rendering and copy. |
+| `code` | `string` | No | Explicit code string. Preferred over `children` when provided. |
 | `language` | `string` | No | - |
 | `showLanguage` | `boolean` | No | `true` or `false` |
 
diff --git a/packages/ui/src/components/code-block/code-block.test.tsx b/packages/ui/src/components/code-block/code-block.test.tsx
index c710117e..a6a703ce 100644
--- a/packages/ui/src/components/code-block/code-block.test.tsx
+++ b/packages/ui/src/components/code-block/code-block.test.tsx
@@ -1,7 +1,7 @@
 import { render } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 
-import { CodeBlock } from "./code-block";
+import { CodeBlock, extractTextFromChildren } from "./code-block";
 
 describe("CodeBlock", () => {
   describe("rendering", () => {
@@ -16,6 +16,28 @@ describe("CodeBlock", () => {
 
       expect(container.firstChild).toHaveClass("custom-class");
     });
+
+    it("extracts strings, numbers, arrays, and nested element text from children", () => {
+      expect(
+        extractTextFromChildren([
+          "const value = ",
+          1,
+          <span key="nested">
+            ;<strong> return value;</strong>
+          </span>,
+        ]),
+      ).toBe("const value = 1; return value;");
+    });
+
+    it("accepts ReactNode children", () => {
+      const { container } = render(
+        <CodeBlock>
+          <span>const value = 1;</span>
+        </CodeBlock>,
+      );
+
+      expect(container.firstChild).toBeInTheDocument();
+    });
   });
 
   describe("accessibility", () => {
diff --git a/packages/ui/src/components/code-block/code-block.tsx b/packages/ui/src/components/code-block/code-block.tsx
index e57197a5..9add6def 100644
--- a/packages/ui/src/components/code-block/code-block.tsx
+++ b/packages/ui/src/components/code-block/code-block.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { Children, isValidElement, useState } from "react";
 
 import { Check, Copy } from "lucide-react";
 import { useTheme } from "next-themes";
+import type { ReactNode, WheelEvent } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import {
   oneDark,
@@ -14,33 +15,25 @@ import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 
 type CodeBlockProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
+  code?: string;
   language?: string;
   showLanguage?: boolean;
 };
 
-function extractTextFromChildren(children: ReactNode): string {
-  if (typeof children === "string") {
-    return children;
-  }
-  if (typeof children === "number") {
-    return String(children);
-  }
-  if (Array.isArray(children)) {
-    return children.map(extractTextFromChildren).join("");
-  }
-  if (
-    children &&
-    typeof children === "object" &&
-    "props" in children &&
-    children.props &&
-    typeof children.props === "object" &&
-    "children" in children.props
-  ) {
-    return extractTextFromChildren(children.props.children as ReactNode);
-  }
-  return String(children ?? "");
+export function extractTextFromChildren(children: ReactNode): string {
+  return Children.toArray(children)
+    .map((child) => {
+      if (typeof child === "string" || typeof child === "number") {
+        return String(child);
+      }
+      if (isValidElement<{ children?: ReactNode }>(child)) {
+        return extractTextFromChildren(child.props.children);
+      }
+      return "";
+    })
+    .join("");
 }
 
 function findScrollableParent(
@@ -51,9 +44,19 @@ function findScrollableParent(
   return findScrollableParent(element.parentElement);
 }
 
+function redirectVerticalWheel(event: WheelEvent<HTMLDivElement>): void {
+  if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+  const scrollable = findScrollableParent(event.currentTarget);
+  if (scrollable) {
+    scrollable.scrollTop += event.deltaY;
+    event.preventDefault();
+  }
+}
+
 export function CodeBlock({
   children,
   className,
+  code: codeProperty,
   language = "typescript",
   showLanguage = false,
 }: CodeBlockProps) {
@@ -63,28 +66,7 @@ export function CodeBlock({
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   const isDark = resolvedTheme !== "light";
   const codeStyle = isDark ? oneDark : oneLight;
-  const code = extractTextFromChildren(children);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const element = scrollRef.current;
-    if (!element) return;
-
-    const onWheel = (event: WheelEvent) => {
-      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
-      const scrollable = findScrollableParent(element);
-      if (scrollable) {
-        scrollable.scrollTop += event.deltaY;
-        event.preventDefault();
-      }
-    };
-
-    element.addEventListener("wheel", onWheel, { passive: false });
-    return () => {
-      element.removeEventListener("wheel", onWheel);
-    };
-  }, []);
+  const code = codeProperty ?? extractTextFromChildren(children);
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(code);
@@ -103,7 +85,7 @@ export function CodeBlock({
     >
       <div
         className="relative overflow-x-auto overflow-y-hidden touch-pan-y"
-        ref={scrollRef}
+        onWheel={redirectVerticalWheel}
       >
         <SyntaxHighlighter
           codeTagProps={{
diff --git a/packages/ui/src/components/code-playground/code-playground.mdx b/packages/ui/src/components/code-playground/code-playground.mdx
index 9c9bb955..efaf1ec8 100644
--- a/packages/ui/src/components/code-playground/code-playground.mdx
+++ b/packages/ui/src/components/code-playground/code-playground.mdx
@@ -38,6 +38,8 @@ import { CodePlayground, FileTree } from '@vllnt/ui'
 
 | Prop | Type | Required | Description |
 | ---- | ---- | -------- | ----------- |
+| `children` | `ReactNode` | No | Code content. Strings, numbers, arrays, and nested element text are extracted for rendering and copy. |
+| `code` | `string` | No | Explicit code string. Preferred over `children` when provided. |
 | `description` | `string` | No | - |
 | `filename` | `string` | No | - |
 | `highlightLines` | `number[]` | No | Array of `number` |
diff --git a/packages/ui/src/components/code-playground/code-playground.test.tsx b/packages/ui/src/components/code-playground/code-playground.test.tsx
index 1d82c196..d0a23ca7 100644
--- a/packages/ui/src/components/code-playground/code-playground.test.tsx
+++ b/packages/ui/src/components/code-playground/code-playground.test.tsx
@@ -37,4 +37,14 @@ describe("CodePlayground", () => {
 
     expect(screen.getByText(/greeting/)).toBeInTheDocument();
   });
+
+  it("accepts ReactNode children", () => {
+    render(
+      <CodePlayground title="Demo">
+        <span>const value = 1;</span>
+      </CodePlayground>,
+    );
+
+    expect(screen.getByText(/value/)).toBeInTheDocument();
+  });
 });
diff --git a/packages/ui/src/components/code-playground/code-playground.tsx b/packages/ui/src/components/code-playground/code-playground.tsx
index 8422845f..06648969 100644
--- a/packages/ui/src/components/code-playground/code-playground.tsx
+++ b/packages/ui/src/components/code-playground/code-playground.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { Children, isValidElement, useState } from "react";
 
 import { Check, Code, Copy, FileCode } from "lucide-react";
 import type { ReactNode } from "react";
@@ -27,7 +27,8 @@ function CodeLine({ highlightLines, line, lineNumber }: CodeLineProps) {
 }
 
 export type CodePlaygroundProps = {
-  children: ReactNode;
+  children?: ReactNode;
+  code?: string;
   description?: string;
   filename?: string;
   highlightLines?: number[];
@@ -38,8 +39,23 @@ export type CodePlaygroundProps = {
 
 const EMPTY_HIGHLIGHT_LINES: number[] = [];
 
+function extractTextFromChildren(children: ReactNode): string {
+  return Children.toArray(children)
+    .map((child) => {
+      if (typeof child === "string" || typeof child === "number") {
+        return String(child);
+      }
+      if (isValidElement<{ children?: ReactNode }>(child)) {
+        return extractTextFromChildren(child.props.children);
+      }
+      return "";
+    })
+    .join("");
+}
+
 export function CodePlayground({
   children,
+  code: codeProperty,
   description,
   filename,
   highlightLines = EMPTY_HIGHLIGHT_LINES,
@@ -48,7 +64,7 @@ export function CodePlayground({
   title,
 }: CodePlaygroundProps) {
   const [copied, setCopied] = useState(false);
-  const code = typeof children === "string" ? children : "";
+  const code = codeProperty ?? extractTextFromChildren(children);
   const lines = code.split("\n");
 
   const handleCopy = async () => {
diff --git a/packages/ui/src/components/completion-dialog/completion-dialog.tsx b/packages/ui/src/components/completion-dialog/completion-dialog.tsx
index 05c1a8c2..647ccd4c 100644
--- a/packages/ui/src/components/completion-dialog/completion-dialog.tsx
+++ b/packages/ui/src/components/completion-dialog/completion-dialog.tsx
@@ -4,6 +4,7 @@ import { memo, useCallback, useEffect, useRef } from "react";
 
 import type { ReactNode } from "react";
 
+import { useDocumentEventListener } from "../../lib/use-event-callback";
 import { cn } from "../../lib/utils";
 import { Button } from "../button";
 
@@ -152,13 +153,7 @@ function CompletionDialogImpl({
     [isOpen, onClose, onConfirm, onCancel, confirmShortcut, cancelShortcut],
   );
 
-  useEffect(() => {
-    if (!isOpen) return;
-    document.addEventListener("keydown", handleKeyDown, true);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    };
-  }, [isOpen, handleKeyDown]);
+  useDocumentEventListener("keydown", handleKeyDown, true);
 
   if (!isOpen) return null;
 
diff --git a/packages/ui/src/components/content-intro/content-intro.mdx b/packages/ui/src/components/content-intro/content-intro.mdx
index e6aaa449..0365e7ca 100644
--- a/packages/ui/src/components/content-intro/content-intro.mdx
+++ b/packages/ui/src/components/content-intro/content-intro.mdx
@@ -33,9 +33,9 @@ const sections = [
 
 <ContentIntro
   estimatedTime="value"
+  introContent={<p>Welcome to this tutorial.</p>}
   onGoToSection={(index) => console.log(index)}
   onStart={() => {}}
-  renderIntroContent={() => {}}
   sections={sections}
   title="My Title"
 />
@@ -52,11 +52,12 @@ const sections = [
 | `additionalContent` | `ReactNode` | No | React content (JSX, string, number, etc.) |
 | `completedSections` | `Set&lt;string&gt;` | Yes | - |
 | `estimatedTime` | `string` | Yes | - |
+| `introContent` | `ReactNode` | No | Rendered introduction content. Preferred over `renderIntroContent` when both are provided. |
 | `isLoading` | `boolean` | No | `true` or `false` |
 | `labels` | `ContentIntroLabels` | No | `ContentIntroLabels` object |
 | `onGoToSection` | `(index: number) =&gt; void` | Yes | Callback: `(index: number) => void` |
 | `onStart` | `() =&gt; void` | Yes | Callback function |
-| `renderIntroContent` | `() =&gt; ReactNode` | Yes | Callback function |
+| `renderIntroContent` | `() =&gt; ReactNode` | No | Legacy render prop for introduction content |
 | `sections` | `ContentIntroSection[]` | Yes | Array of `ContentIntroSection` objects |
 | `title` | `string` | Yes | - |
 
@@ -91,4 +92,3 @@ type ContentIntroLabels = {
 | `continueLabel` | `string` | No | - |
 | `startLabel` | `string` | No | - |
 | `tableOfContentsLabel` | `string` | No | - |
-
diff --git a/packages/ui/src/components/content-intro/content-intro.stories.tsx b/packages/ui/src/components/content-intro/content-intro.stories.tsx
index 898c3333..2a688c84 100644
--- a/packages/ui/src/components/content-intro/content-intro.stories.tsx
+++ b/packages/ui/src/components/content-intro/content-intro.stories.tsx
@@ -6,9 +6,9 @@ const meta = {
   args: {
     completedSections: new Set<string>(),
     estimatedTime: "10 min",
+    introContent: "Welcome to this tutorial.",
     onGoToSection: () => {},
     onStart: () => {},
-    renderIntroContent: () => "Welcome to this tutorial.",
     sections: [
       { id: "intro", title: "Introduction" },
       { id: "basics", title: "Basics" },
diff --git a/packages/ui/src/components/content-intro/content-intro.test.tsx b/packages/ui/src/components/content-intro/content-intro.test.tsx
new file mode 100644
index 00000000..13a8efb2
--- /dev/null
+++ b/packages/ui/src/components/content-intro/content-intro.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { ContentIntro } from "./content-intro";
+
+const defaultProps = {
+  completedSections: new Set<string>(),
+  estimatedTime: "10 min",
+  onGoToSection: vi.fn(),
+  onStart: vi.fn(),
+  sections: [{ id: "intro", title: "Introduction" }],
+  title: "Getting Started",
+};
+
+describe("ContentIntro", () => {
+  it("renders introduction content from the legacy renderIntroContent prop", () => {
+    render(
+      <ContentIntro
+        {...defaultProps}
+        renderIntroContent={() => <p>Legacy introduction</p>}
+      />,
+    );
+
+    expect(screen.getByText("Legacy introduction")).toBeInTheDocument();
+  });
+
+  it("prefers introContent over the legacy renderIntroContent prop", () => {
+    render(
+      <ContentIntro
+        {...defaultProps}
+        introContent={<p>New introduction</p>}
+        renderIntroContent={() => <p>Legacy introduction</p>}
+      />,
+    );
+
+    expect(screen.getByText("New introduction")).toBeInTheDocument();
+    expect(screen.queryByText("Legacy introduction")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/components/content-intro/content-intro.tsx b/packages/ui/src/components/content-intro/content-intro.tsx
index df02931a..95800050 100644
--- a/packages/ui/src/components/content-intro/content-intro.tsx
+++ b/packages/ui/src/components/content-intro/content-intro.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { memo, useCallback, useEffect } from "react";
+import { memo, useCallback } from "react";
 
 import type { ReactNode } from "react";
 
+import { useDocumentEventListener } from "../../lib/use-event-callback";
 import { cn } from "../../lib/utils";
 import { Button } from "../button";
 
@@ -25,6 +26,8 @@ export type ContentIntroProps = {
   completedSections: Set<string>;
   /** Estimated time to complete */
   estimatedTime: string;
+  /** Rendered introduction content */
+  introContent?: ReactNode;
   /** Is loading progress */
   isLoading?: boolean;
   /** Labels for i18n */
@@ -33,8 +36,8 @@ export type ContentIntroProps = {
   onGoToSection: (index: number) => void;
   /** Callback when starting */
   onStart: () => void;
-  /** Render function for intro content */
-  renderIntroContent: () => ReactNode;
+  /** Render prop used by existing consumers to provide introduction content */
+  renderIntroContent?: () => ReactNode;
   /** Sections for TOC */
   sections: ContentIntroSection[];
   /** Intro section title */
@@ -54,6 +57,7 @@ function ContentIntroImpl({
   additionalContent,
   completedSections,
   estimatedTime,
+  introContent,
   isLoading = false,
   labels = EMPTY_CONTENT_INTRO_LABELS,
   onGoToSection,
@@ -64,6 +68,7 @@ function ContentIntroImpl({
 }: ContentIntroProps): React.ReactNode {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const hasProgress = completedSections.size > 0;
+  const renderedIntroContent = introContent ?? renderIntroContent?.();
 
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
@@ -75,12 +80,7 @@ function ContentIntroImpl({
     [onStart],
   );
 
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [handleKeyDown]);
+  useDocumentEventListener("keydown", handleKeyDown);
 
   return (
     <>
@@ -89,7 +89,7 @@ function ContentIntroImpl({
         <section className="py-6">
           <h2 className="text-2xl md:text-3xl font-semibold mb-6">{title}</h2>
           <div className={cn("max-w-none", "[&_h2:first-of-type]:hidden")}>
-            {renderIntroContent()}
+            {renderedIntroContent}
           </div>
         </section>
 
diff --git a/packages/ui/src/components/mdx-content/mdx-content.tsx b/packages/ui/src/components/mdx-content/mdx-content.tsx
index bda9a461..c7b8d372 100644
--- a/packages/ui/src/components/mdx-content/mdx-content.tsx
+++ b/packages/ui/src/components/mdx-content/mdx-content.tsx
@@ -1,3 +1,5 @@
+import { Children } from "react";
+
 import { evaluate } from "@mdx-js/mdx";
 import type React from "react";
 import * as runtime from "react/jsx-runtime";
@@ -33,10 +35,7 @@ const MDXComponents: Components = {
   code: ({ children, className, ...props }: React.ComponentProps<"code">) => {
     if (typeof className === "string" && className.startsWith("language-")) {
       const language = className.replace(/^language-/, "");
-      const text =
-        typeof children === "string"
-          ? children.replace(/\n$/, "")
-          : String(children ?? "");
+      const text = Children.toArray(children).join("").replace(/\n$/, "");
       return <CodeBlock language={language}>{text}</CodeBlock>;
     }
     return (
diff --git a/packages/ui/src/components/search-bar/search-bar.tsx b/packages/ui/src/components/search-bar/search-bar.tsx
index 82fdb63a..b5295819 100644
--- a/packages/ui/src/components/search-bar/search-bar.tsx
+++ b/packages/ui/src/components/search-bar/search-bar.tsx
@@ -51,9 +51,11 @@ function SearchBarInner({
   onSearch,
   placeholder = "Search posts...",
 }: SearchBarProps) {
-  const router = useRouter();
+  const { replace } = useRouter();
   const searchParameters = useSearchParams();
-  const initialQuery = searchParameters.get("search") ?? "";
+  const searchParametersString = searchParameters.toString();
+  const initialQuery =
+    new URLSearchParams(searchParametersString).get("search") ?? "";
   const [query, setQuery] = useState(initialQuery);
   const debouncedQuery = useDebounce(query, 300);
   const isInitialMount = useRef(true);
@@ -66,7 +68,8 @@ function SearchBarInner({
   // Sync query with URL search params (e.g., on browser back/forward)
   // Sync when user is not actively typing and URL changed externally
   useEffect(() => {
-    const searchParameter = searchParameters.get("search") ?? "";
+    const searchParameter =
+      new URLSearchParams(searchParametersString).get("search") ?? "";
 
     // Skip if this is the search param we set ourselves
     if (searchParameter === lastSetSearchParameterReference.current) {
@@ -80,7 +83,7 @@ function SearchBarInner({
         lastDebouncedQueryReference.current = searchParameter;
       });
     }
-  }, [searchParameters, query]); // Include query to properly sync state
+  }, [searchParametersString, query]); // Include query to properly sync state
 
   // Update URL when debounced query changes
   useEffect(() => {
@@ -108,7 +111,8 @@ function SearchBarInner({
     }
 
     // Check current URL to avoid unnecessary updates
-    const currentUrlParameter = searchParameters.get("search") ?? "";
+    const parameters = new URLSearchParams(searchParametersString);
+    const currentUrlParameter = parameters.get("search") ?? "";
 
     // Skip if URL already matches the debounced query
     if (trimmedQuery === currentUrlParameter) {
@@ -116,7 +120,6 @@ function SearchBarInner({
       return;
     }
 
-    const parameters = new URLSearchParams(searchParameters);
     if (trimmedQuery) {
       parameters.set("search", trimmedQuery);
     } else {
@@ -129,8 +132,8 @@ function SearchBarInner({
     // nextjs-no-client-side-redirect rule targets window.location
     // hard redirects, not Next router.replace — but ESLint doesn't
     // know that rule, so we don't add an eslint-disable for it.
-    router.replace(`?${newUrl}`);
-  }, [debouncedQuery, router, onSearch, searchParameters]);
+    replace(`?${newUrl}`);
+  }, [debouncedQuery, onSearch, replace, searchParametersString]);
 
   // Cleanup timeout on unmount
   useEffect(() => {
@@ -169,7 +172,7 @@ function SearchBarInner({
     if (onSearch) {
       onSearch(trimmedQuery);
     } else {
-      const parameters = new URLSearchParams(searchParameters);
+      const parameters = new URLSearchParams(searchParametersString);
       if (trimmedQuery) {
         parameters.set("search", trimmedQuery);
       } else {
@@ -177,7 +180,7 @@ function SearchBarInner({
       }
       const newUrl = parameters.toString();
       lastSetSearchParameterReference.current = trimmedQuery;
-      router.replace(`?${newUrl}`);
+      replace(`?${newUrl}`);
     }
   };
 
diff --git a/packages/ui/src/components/sidebar/sidebar.tsx b/packages/ui/src/components/sidebar/sidebar.tsx
index c1114e2b..7b99792a 100644
--- a/packages/ui/src/components/sidebar/sidebar.tsx
+++ b/packages/ui/src/components/sidebar/sidebar.tsx
@@ -66,7 +66,7 @@ function useScrollFade(
     };
 
     checkScroll();
-    container.addEventListener("scroll", checkScroll);
+    container.addEventListener("scroll", checkScroll, { passive: true });
     return () => {
       container.removeEventListener("scroll", checkScroll);
     };
diff --git a/packages/ui/src/components/slideshow/slideshow.mdx b/packages/ui/src/components/slideshow/slideshow.mdx
index 1b33ca58..097e042f 100644
--- a/packages/ui/src/components/slideshow/slideshow.mdx
+++ b/packages/ui/src/components/slideshow/slideshow.mdx
@@ -31,13 +31,17 @@ const sections = [
   },
 ]
 
+function SectionContent({ section }) {
+  return <p>{section.title}</p>
+}
+
 <Slideshow
+  SectionContent={SectionContent}
   currentIndex="0"
   onComplete={() => {}}
   onExit={() => {}}
   onNavigate={(index) => console.log(index)}
   onToggleSection={(sectionId) => console.log(sectionId)}
-  renderContent={(section) => console.log(section)}
   sections={sections}
   title="My Title"
 />
@@ -51,6 +55,7 @@ const sections = [
 
 | Prop | Type | Required | Description |
 | ---- | ---- | -------- | ----------- |
+| `SectionContent` | `ComponentType&lt;SlideshowSectionContentProps&gt;` | No | Component used to render the current section content. Preferred over `renderContent` when both are provided. |
 | `completedSections` | `Set&lt;string&gt;` | Yes | - |
 | `completionDialogTitle` | `string` | No | - |
 | `currentIndex` | `number` | Yes | - |
@@ -59,7 +64,7 @@ const sections = [
 | `onExit` | `() =&gt; void` | Yes | Callback function |
 | `onNavigate` | `(index: number) =&gt; void` | Yes | Callback: `(index: number) => void` |
 | `onToggleSection` | `(sectionId: string) =&gt; void` | Yes | Callback: `(sectionId: string) => void` |
-| `renderContent` | `(section: SlideshowSection) =&gt; ReactNode` | Yes | Callback: `(section: SlideshowSection) => ReactNode` |
+| `renderContent` | `(section: SlideshowSection) =&gt; ReactNode` | No | Legacy render prop used to render the current section content |
 | `sections` | `SlideshowSection[]` | Yes | Array of `SlideshowSection` objects |
 | `title` | `string` | Yes | - |
 
@@ -104,4 +109,3 @@ type SlideshowLabels = {
 | `openTocLabel` | `string` | No | - |
 | `prevLabel` | `string` | No | - |
 | `sectionsLabel` | `string` | No | - |
-
diff --git a/packages/ui/src/components/slideshow/slideshow.stories.tsx b/packages/ui/src/components/slideshow/slideshow.stories.tsx
index c321de5a..9341d9c8 100644
--- a/packages/ui/src/components/slideshow/slideshow.stories.tsx
+++ b/packages/ui/src/components/slideshow/slideshow.stories.tsx
@@ -10,7 +10,7 @@ const meta = {
     onExit: () => {},
     onNavigate: () => {},
     onToggleSection: () => {},
-    renderContent: () => "Slide content here.",
+    SectionContent: ({ section }) => `Slide content for ${section.title}.`,
     sections: [
       { id: "intro", title: "Introduction" },
       { id: "setup", title: "Setup" },
diff --git a/packages/ui/src/components/slideshow/slideshow.test.tsx b/packages/ui/src/components/slideshow/slideshow.test.tsx
new file mode 100644
index 00000000..ca62038c
--- /dev/null
+++ b/packages/ui/src/components/slideshow/slideshow.test.tsx
@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import { Slideshow } from "./slideshow";
+
+const defaultProps = {
+  completedSections: new Set<string>(),
+  currentIndex: 0,
+  onComplete: vi.fn(),
+  onExit: vi.fn(),
+  onNavigate: vi.fn(),
+  onToggleSection: vi.fn(),
+  sections: [{ id: "intro", title: "Introduction" }],
+  title: "Tutorial Slideshow",
+};
+
+describe("Slideshow", () => {
+  it("renders section content from the legacy renderContent prop", () => {
+    render(
+      <Slideshow
+        {...defaultProps}
+        renderContent={(section) => <p>Legacy content for {section.title}</p>}
+      />,
+    );
+
+    expect(
+      screen.getByText("Legacy content for Introduction"),
+    ).toBeInTheDocument();
+  });
+
+  it("prefers SectionContent over the legacy renderContent prop", () => {
+    render(
+      <Slideshow
+        {...defaultProps}
+        renderContent={() => <p>Legacy content</p>}
+        SectionContent={({ section }) => <p>New content for {section.title}</p>}
+      />,
+    );
+
+    expect(
+      screen.getByText("New content for Introduction"),
+    ).toBeInTheDocument();
+    expect(screen.queryByText("Legacy content")).not.toBeInTheDocument();
+  });
+});
diff --git a/packages/ui/src/components/slideshow/slideshow.tsx b/packages/ui/src/components/slideshow/slideshow.tsx
index cdee1450..7cac4410 100644
--- a/packages/ui/src/components/slideshow/slideshow.tsx
+++ b/packages/ui/src/components/slideshow/slideshow.tsx
@@ -2,9 +2,10 @@
 
 import { memo, useCallback, useEffect, useState } from "react";
 
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 import { createPortal } from "react-dom";
 
+import { useDocumentEventListener } from "../../lib/use-event-callback";
 import { useMounted } from "../../lib/use-mounted";
 import { cn } from "../../lib/utils";
 import { CompletionDialog } from "../completion-dialog";
@@ -14,6 +15,10 @@ export type SlideshowSection = {
   title: string;
 };
 
+export type SlideshowSectionContentProps = {
+  section: SlideshowSection;
+};
+
 export type SlideshowLabels = {
   closeLabel?: string;
   closeTocLabel?: string;
@@ -42,8 +47,10 @@ export type SlideshowProps = {
   onNavigate: (index: number) => void;
   /** Callback to toggle section completion */
   onToggleSection: (sectionId: string) => void;
-  /** Render function for section content */
-  renderContent: (section: SlideshowSection) => ReactNode;
+  /** Render prop used by existing consumers to render the current section content */
+  renderContent?: (section: SlideshowSection) => ReactNode;
+  /** Component used to render the current section content */
+  SectionContent?: ComponentType<SlideshowSectionContentProps>;
   /** Sections to display */
   sections: SlideshowSection[];
   /** Tutorial title */
@@ -63,6 +70,326 @@ const DEFAULT_LABELS: Required<SlideshowLabels> = {
 
 const EMPTY_SLIDESHOW_LABELS: SlideshowLabels = {};
 
+type MergedSlideshowLabels = Required<SlideshowLabels>;
+
+type SlideshowHeaderProps = {
+  currentIndex: number;
+  currentSection: SlideshowSection;
+  isTocOpen: boolean;
+  labels: MergedSlideshowLabels;
+  onExit: () => void;
+  onToggleToc: () => void;
+  sectionCount: number;
+  title: string;
+};
+
+function SlideshowHeader({
+  currentIndex,
+  currentSection,
+  isTocOpen,
+  labels,
+  onExit,
+  onToggleToc,
+  sectionCount,
+  title,
+}: SlideshowHeaderProps): ReactNode {
+  return (
+    <div className="flex items-center justify-between px-4 py-3 mt-1 border-b border-border bg-background">
+      <div className="flex items-center gap-3 min-w-0 flex-1">
+        <button
+          aria-label={isTocOpen ? labels.closeTocLabel : labels.openTocLabel}
+          className="flex-shrink-0 p-2 rounded-lg hover:bg-muted transition-colors"
+          onClick={onToggleToc}
+          type="button"
+        >
+          {isTocOpen ? (
+            <svg
+              className="size-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M6 18L18 6M6 6l12 12"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          ) : (
+            <svg
+              className="size-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M4 6h16M4 12h16M4 18h16"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          )}
+        </button>
+        <div className="min-w-0 flex-1">
+          <p className="text-xs text-muted-foreground truncate">{title}</p>
+          <p className="text-sm font-medium truncate">{currentSection.title}</p>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 flex-shrink-0">
+        <span className="text-xs text-muted-foreground tabular-nums hidden sm:inline">
+          {currentIndex + 1}/{sectionCount}
+        </span>
+        <button
+          aria-label={labels.exitLabel}
+          className="p-2 rounded-lg hover:bg-muted transition-colors"
+          onClick={onExit}
+          type="button"
+        >
+          <svg
+            className="size-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M6 18L18 6M6 6l12 12"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+type SlideshowTableOfContentsProps = {
+  completedSections: Set<string>;
+  currentIndex: number;
+  isOpen: boolean;
+  labels: MergedSlideshowLabels;
+  onClose: () => void;
+  onNavigate: (index: number) => void;
+  sections: SlideshowSection[];
+};
+
+function SlideshowTableOfContents({
+  completedSections,
+  currentIndex,
+  isOpen,
+  labels,
+  onClose,
+  onNavigate,
+  sections,
+}: SlideshowTableOfContentsProps): ReactNode {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="absolute inset-0 z-20 flex animate-in fade-in-0 duration-200"
+      onClick={onClose}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") onClose();
+      }}
+      role="button"
+      tabIndex={0}
+    >
+      <div className="absolute inset-0 bg-background/40" />
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+      <div
+        className="relative w-full sm:max-w-sm bg-background border-r border-border h-full overflow-auto shadow-2xl"
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+        onKeyDown={(event) => {
+          event.stopPropagation();
+        }}
+        role="dialog"
+      >
+        <div className="sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background">
+          <h3 className="font-semibold">{labels.sectionsLabel}</h3>
+          <button
+            aria-label={labels.closeLabel}
+            className="p-2 rounded-lg hover:bg-muted transition-colors"
+            onClick={onClose}
+            type="button"
+          >
+            <svg
+              className="size-4"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M6 18L18 6M6 6l12 12"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+              />
+            </svg>
+          </button>
+        </div>
+        <div className="p-2">
+          {sections.map((section, index) => {
+            const isCompleted = completedSections.has(section.id);
+            const isCurrent = index === currentIndex;
+            return (
+              <button
+                className={cn(
+                  "w-full flex items-center gap-3 p-3 rounded-lg text-left transition-colors",
+                  isCurrent ? "bg-muted" : "hover:bg-muted/50",
+                )}
+                key={section.id}
+                onClick={() => {
+                  onNavigate(index);
+                }}
+                type="button"
+              >
+                <div
+                  className={cn(
+                    "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
+                    isCompleted
+                      ? "bg-foreground border-foreground"
+                      : "border-muted-foreground",
+                  )}
+                >
+                  {isCompleted ? (
+                    <svg
+                      className="size-3 text-background"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M5 13l4 4L19 7"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                      />
+                    </svg>
+                  ) : null}
+                </div>
+                <span
+                  className={cn(
+                    "flex-1 text-sm truncate",
+                    isCompleted && "line-through opacity-60",
+                  )}
+                >
+                  {section.title}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type SlideshowContentProps = {
+  animationDirection: "left" | "right" | null;
+  currentSection: SlideshowSection;
+  renderContent?: (section: SlideshowSection) => ReactNode;
+  SectionContent?: ComponentType<SlideshowSectionContentProps>;
+};
+
+function SlideshowContent({
+  animationDirection,
+  currentSection,
+  renderContent,
+  SectionContent,
+}: SlideshowContentProps): ReactNode {
+  const content = SectionContent ? (
+    <SectionContent section={currentSection} />
+  ) : (
+    renderContent?.(currentSection)
+  );
+
+  return (
+    <div className="h-full overflow-auto px-4 py-8 md:px-8 lg:px-16">
+      <div className="mx-auto max-w-3xl">
+        <div
+          className={cn(
+            "transition-all duration-150 ease-out",
+            animationDirection === "left" && "opacity-0 -translate-x-4",
+            animationDirection === "right" && "opacity-0 translate-x-4",
+            !animationDirection && "opacity-100 translate-x-0",
+          )}
+        >
+          {content}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type SlideshowBottomNavProps = {
+  canGoPrevious: boolean;
+  isLastSection: boolean;
+  labels: MergedSlideshowLabels;
+  onNext: () => void;
+  onPrevious: () => void;
+};
+
+function SlideshowBottomNav({
+  canGoPrevious,
+  isLastSection,
+  labels,
+  onNext,
+  onPrevious,
+}: SlideshowBottomNavProps): ReactNode {
+  return (
+    <div className="relative z-20 flex items-center justify-between p-4 border-t border-border bg-background">
+      <button
+        className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
+        disabled={!canGoPrevious}
+        onClick={onPrevious}
+        type="button"
+      >
+        <svg
+          className="size-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="m15 19-7-7 7-7"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+          />
+        </svg>
+        <span>{labels.prevLabel}</span>
+      </button>
+      <button
+        className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md bg-foreground text-background hover:bg-foreground/90 transition-colors"
+        onClick={onNext}
+        type="button"
+      >
+        <span>{isLastSection ? labels.finishLabel : labels.nextLabel}</span>
+        {!isLastSection && (
+          <svg
+            className="size-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="m9 5 7 7-7 7"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+            />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}
+
 function SlideshowImpl({
   completedSections,
   completionDialogTitle = "Mark section as complete?",
@@ -73,9 +400,10 @@ function SlideshowImpl({
   onNavigate,
   onToggleSection,
   renderContent,
+  SectionContent,
   sections,
   title,
-}: SlideshowProps): React.ReactNode {
+}: SlideshowProps): ReactNode {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const [animationDirection, setAnimationDirection] = useState<
     "left" | "right" | null
@@ -153,8 +481,8 @@ function SlideshowImpl({
     [currentIndex, goToSection],
   );
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent): void => {
+  const handleSlideshowKeyDown = useCallback(
+    (event: KeyboardEvent): void => {
       if (isCompletionDialogOpen) return;
       if (event.key === "Escape") {
         event.preventDefault();
@@ -164,7 +492,7 @@ function SlideshowImpl({
       }
       if (event.key === "t" || event.key === "T") {
         event.preventDefault();
-        setIsTocOpen((p) => !p);
+        setIsTocOpen((previous) => !previous);
         return;
       }
       if (event.key === "ArrowRight" || event.key === "j") {
@@ -176,12 +504,11 @@ function SlideshowImpl({
         event.preventDefault();
         handlePrevious();
       }
-    };
-    document.addEventListener("keydown", handleKeyDown, true);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown, true);
-    };
-  }, [handleNext, handlePrevious, onExit, isTocOpen, isCompletionDialogOpen]);
+    },
+    [handleNext, handlePrevious, isCompletionDialogOpen, isTocOpen, onExit],
+  );
+
+  useDocumentEventListener("keydown", handleSlideshowKeyDown, true);
 
   if (!currentSection || !mounted) return null;
 
@@ -195,256 +522,49 @@ function SlideshowImpl({
         />
       </div>
 
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 mt-1 border-b border-border bg-background">
-        <div className="flex items-center gap-3 min-w-0 flex-1">
-          <button
-            aria-label={
-              isTocOpen ? mergedLabels.closeTocLabel : mergedLabels.openTocLabel
-            }
-            className="flex-shrink-0 p-2 rounded-lg hover:bg-muted transition-colors"
-            onClick={() => {
-              setIsTocOpen((p) => !p);
-            }}
-            type="button"
-          >
-            {isTocOpen ? (
-              <svg
-                className="size-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M6 18L18 6M6 6l12 12"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                />
-              </svg>
-            ) : (
-              <svg
-                className="size-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M4 6h16M4 12h16M4 18h16"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                />
-              </svg>
-            )}
-          </button>
-          <div className="min-w-0 flex-1">
-            <p className="text-xs text-muted-foreground truncate">{title}</p>
-            <p className="text-sm font-medium truncate">
-              {currentSection.title}
-            </p>
-          </div>
-        </div>
-        <div className="flex items-center gap-2 flex-shrink-0">
-          <span className="text-xs text-muted-foreground tabular-nums hidden sm:inline">
-            {currentIndex + 1}/{sections.length}
-          </span>
-          <button
-            aria-label={mergedLabels.exitLabel}
-            className="p-2 rounded-lg hover:bg-muted transition-colors"
-            onClick={onExit}
-            type="button"
-          >
-            <svg
-              className="size-5"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M6 18L18 6M6 6l12 12"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
+      <SlideshowHeader
+        currentIndex={currentIndex}
+        currentSection={currentSection}
+        isTocOpen={isTocOpen}
+        labels={mergedLabels}
+        onExit={onExit}
+        onToggleToc={() => {
+          setIsTocOpen((previous) => !previous);
+        }}
+        sectionCount={sections.length}
+        title={title}
+      />
 
       {/* Content */}
       <div className="relative flex-1 overflow-hidden">
-        {isTocOpen ? (
-          <div
-            className="absolute inset-0 z-20 flex animate-in fade-in-0 duration-200"
-            onClick={() => {
-              setIsTocOpen(false);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" || event.key === " ")
-                setIsTocOpen(false);
-            }}
-            role="button"
-            tabIndex={0}
-          >
-            <div className="absolute inset-0 bg-background/40" />
-            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-            <div
-              className="relative w-full sm:max-w-sm bg-background border-r border-border h-full overflow-auto shadow-2xl"
-              onClick={(event) => {
-                event.stopPropagation();
-              }}
-              onKeyDown={(event) => {
-                event.stopPropagation();
-              }}
-              role="dialog"
-            >
-              <div className="sticky top-0 flex items-center justify-between px-4 py-3 border-b border-border bg-background">
-                <h3 className="font-semibold">{mergedLabels.sectionsLabel}</h3>
-                <button
-                  aria-label={mergedLabels.closeLabel}
-                  className="p-2 rounded-lg hover:bg-muted transition-colors"
-                  onClick={() => {
-                    setIsTocOpen(false);
-                  }}
-                  type="button"
-                >
-                  <svg
-                    className="size-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M6 18L18 6M6 6l12 12"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                    />
-                  </svg>
-                </button>
-              </div>
-              <div className="p-2">
-                {sections.map((section, index) => {
-                  const isCompleted = completedSections.has(section.id);
-                  const isCurrent = index === currentIndex;
-                  return (
-                    <button
-                      className={cn(
-                        "w-full flex items-center gap-3 p-3 rounded-lg text-left transition-colors",
-                        isCurrent ? "bg-muted" : "hover:bg-muted/50",
-                      )}
-                      key={section.id}
-                      onClick={() => {
-                        handleTocNavigate(index);
-                      }}
-                      type="button"
-                    >
-                      <div
-                        className={cn(
-                          "flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center",
-                          isCompleted
-                            ? "bg-foreground border-foreground"
-                            : "border-muted-foreground",
-                        )}
-                      >
-                        {isCompleted ? (
-                          <svg
-                            className="size-3 text-background"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              d="M5 13l4 4L19 7"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth={2}
-                            />
-                          </svg>
-                        ) : null}
-                      </div>
-                      <span
-                        className={cn(
-                          "flex-1 text-sm truncate",
-                          isCompleted && "line-through opacity-60",
-                        )}
-                      >
-                        {section.title}
-                      </span>
-                    </button>
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        ) : null}
-
-        <div className="h-full overflow-auto px-4 py-8 md:px-8 lg:px-16">
-          <div className="mx-auto max-w-3xl">
-            <div
-              className={cn(
-                "transition-all duration-150 ease-out",
-                animationDirection === "left" && "opacity-0 -translate-x-4",
-                animationDirection === "right" && "opacity-0 translate-x-4",
-                !animationDirection && "opacity-100 translate-x-0",
-              )}
-            >
-              {renderContent(currentSection)}
-            </div>
-          </div>
-        </div>
-      </div>
+        <SlideshowTableOfContents
+          completedSections={completedSections}
+          currentIndex={currentIndex}
+          isOpen={isTocOpen}
+          labels={mergedLabels}
+          onClose={() => {
+            setIsTocOpen(false);
+          }}
+          onNavigate={handleTocNavigate}
+          sections={sections}
+        />
 
-      {/* Bottom Nav */}
-      <div className="relative z-20 flex items-center justify-between p-4 border-t border-border bg-background">
-        <button
-          className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md hover:bg-muted transition-colors disabled:opacity-50 disabled:pointer-events-none"
-          disabled={!canGoPrevious}
-          onClick={handlePrevious}
-          type="button"
-        >
-          <svg
-            className="size-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="m15 19-7-7 7-7"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-            />
-          </svg>
-          <span>{mergedLabels.prevLabel}</span>
-        </button>
-        <button
-          className="min-w-[100px] gap-1 inline-flex items-center justify-center px-4 py-2 rounded-md bg-foreground text-background hover:bg-foreground/90 transition-colors"
-          onClick={handleNext}
-          type="button"
-        >
-          <span>
-            {isLastSection ? mergedLabels.finishLabel : mergedLabels.nextLabel}
-          </span>
-          {!isLastSection && (
-            <svg
-              className="size-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="m9 5 7 7-7 7"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-              />
-            </svg>
-          )}
-        </button>
+        <SlideshowContent
+          animationDirection={animationDirection}
+          currentSection={currentSection}
+          renderContent={renderContent}
+          SectionContent={SectionContent}
+        />
       </div>
 
+      <SlideshowBottomNav
+        canGoPrevious={canGoPrevious}
+        isLastSection={isLastSection}
+        labels={mergedLabels}
+        onNext={handleNext}
+        onPrevious={handlePrevious}
+      />
+
       <CompletionDialog
         description={`You're about to ${isLastSection ? "finish" : "move to the next section from"}: ${currentSection.title}`}
         isOpen={isCompletionDialogOpen}
diff --git a/packages/ui/src/components/view-switcher/view-switcher.tsx b/packages/ui/src/components/view-switcher/view-switcher.tsx
index 67105f12..c5fbd12e 100644
--- a/packages/ui/src/components/view-switcher/view-switcher.tsx
+++ b/packages/ui/src/components/view-switcher/view-switcher.tsx
@@ -24,22 +24,25 @@ function ViewSwitcherInner({
   options,
   paramName: parameterName = "view",
 }: ViewSwitcherProps) {
-  const router = useRouter();
+  const { push } = useRouter();
   const pathname = usePathname();
   const searchParameters = useSearchParams();
+  const searchParametersString = searchParameters.toString();
 
   const resolvedDefault = defaultKey ?? options[0]?.key ?? "";
-  const currentKey = searchParameters.get(parameterName) ?? resolvedDefault;
+  const currentKey =
+    new URLSearchParams(searchParametersString).get(parameterName) ??
+    resolvedDefault;
 
   function handleSelect(key: string): void {
-    const parameters = new URLSearchParams(searchParameters.toString());
+    const parameters = new URLSearchParams(searchParametersString);
     if (key === resolvedDefault) {
       parameters.delete(parameterName);
     } else {
       parameters.set(parameterName, key);
     }
     const query = parameters.toString();
-    router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    push(query ? `${pathname}?${query}` : pathname, { scroll: false });
   }
 
   return (
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e8464d62..318fcbe6 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -19,6 +19,11 @@ export {
   type SupportedLanguage as UISupportedLanguage,
 } from "./lib/types";
 export { useDebounce } from "./lib/use-debounce";
+export {
+  useDocumentEventListener,
+  useEventCallback,
+  useWindowEventListener,
+} from "./lib/use-event-callback";
 export { useHorizontalScroll } from "./lib/use-horizontal-scroll";
 export { useMounted } from "./lib/use-mounted";
 export { cn } from "./lib/utils";
diff --git a/packages/ui/src/lib/use-event-callback.ts b/packages/ui/src/lib/use-event-callback.ts
new file mode 100644
index 00000000..e37c7343
--- /dev/null
+++ b/packages/ui/src/lib/use-event-callback.ts
@@ -0,0 +1,77 @@
+"use client";
+
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+
+const useIsomorphicLayoutEffect =
+  typeof window === "undefined" ? useEffect : useLayoutEffect;
+
+type EventListenerOptions = AddEventListenerOptions | boolean;
+
+export function useEventCallback<TArguments extends unknown[], TReturnValue>(
+  callback: (...arguments_: TArguments) => TReturnValue,
+): (...arguments_: TArguments) => TReturnValue {
+  const callbackRef = useRef(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  return useCallback((...arguments_: TArguments) => {
+    return callbackRef.current(...arguments_);
+  }, []);
+}
+
+export function useDocumentEventListener<TKey extends keyof DocumentEventMap>(
+  type: TKey,
+  listener: (event: DocumentEventMap[TKey]) => void,
+  options?: EventListenerOptions,
+): void {
+  const listenerRef = useRef(listener);
+
+  useIsomorphicLayoutEffect(() => {
+    listenerRef.current = listener;
+  }, [listener]);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+
+    const handleEvent = (event: DocumentEventMap[TKey]): void => {
+      listenerRef.current(event);
+    };
+
+    document.addEventListener(type, handleEvent, options);
+    return () => {
+      document.removeEventListener(type, handleEvent, options);
+    };
+  }, [options, type]);
+}
+
+type WindowEventListenerOptions = {
+  enabled?: boolean;
+  options?: EventListenerOptions;
+};
+
+export function useWindowEventListener<TKey extends keyof WindowEventMap>(
+  type: TKey,
+  listener: (event: WindowEventMap[TKey]) => void,
+  { enabled = true, options }: WindowEventListenerOptions = {},
+): void {
+  const listenerRef = useRef(listener);
+
+  useIsomorphicLayoutEffect(() => {
+    listenerRef.current = listener;
+  }, [listener]);
+
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") return;
+
+    const handleEvent = (event: WindowEventMap[TKey]): void => {
+      listenerRef.current(event);
+    };
+
+    window.addEventListener(type, handleEvent, options);
+    return () => {
+      window.removeEventListener(type, handleEvent, options);
+    };
+  }, [enabled, options, type]);
+}