From 3423a274aec550138ef4ced17992859226d22d14 Mon Sep 17 00:00:00 2001
From: ikabra <ikabra@cloudflare.com>
Date: Thu, 1 Jan 2026 18:16:12 +0530
Subject: [PATCH 1/5] fix: add ui component gallery

---
 .../RTKSDKSelector/RTKSDKSelector.tsx         |  10 +-
 .../RTKUIComponent/RTKUIComponent.astro       |  24 +
 .../RTKUIComponent/RTKUIComponent.tsx         |  91 +++
 .../RTKUIComponentGrid.astro                  |   5 +
 .../RTKUIComponentGrid/RTKUIComponentGrid.tsx | 536 ++++++++++++++++++
 .../realtimekit/ui-kit/component-library.mdx  | 278 +--------
 6 files changed, 667 insertions(+), 277 deletions(-)
 create mode 100644 src/components/realtimekit/RTKUIComponent/RTKUIComponent.astro
 create mode 100644 src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx
 create mode 100644 src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.astro
 create mode 100644 src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx

diff --git a/src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx b/src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx
index 580435af509978..8b6701b8436808 100644
--- a/src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx
+++ b/src/components/realtimekit/RTKSDKSelector/RTKSDKSelector.tsx
@@ -30,12 +30,12 @@ export default function SDKSelector() {
 
 	return (
 		<>
-			<div className="my-5 flex flex-col gap-0 rounded-md bg-blue-100 p-2 dark:bg-neutral-800">
+			<div className="my-5 flex flex-col gap-0 rounded-sm bg-blue-50 p-2 dark:bg-neutral-800">
 				<div className="flex w-full flex-row items-start justify-start gap-2">
 					{platforms.map((p) => (
 						<button
 							type="button"
-							className={`m-0 ${p.id === platform ? "rounded-t-md bg-neutral-50 text-blue-500 dark:bg-neutral-700" : "bg-blue-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300"} px-2 py-1 font-medium`}
+							className={`m-0 ${p.id === platform ? "rounded-t-md bg-white font-semibold text-blue-800 dark:bg-neutral-700 dark:text-blue-100" : "bg-blue-50 text-neutral-800 dark:bg-neutral-800 dark:text-neutral-300"} cursor-pointer px-2 py-1 font-medium`}
 							onClick={() => {
 								const nextPlatform = p.id;
 								const nextFramework =
@@ -52,11 +52,11 @@ export default function SDKSelector() {
 					))}
 				</div>
 				{frameworks.length < 1 && (
-					<div className="m-0 w-full rounded-r-md rounded-b-md bg-neutral-50 p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
+					<div className="m-0 w-full rounded-r-md rounded-b-md bg-white p-4 text-sm text-gray-500 italic dark:bg-neutral-700 dark:text-gray-400">
 						No frameworks available.
 					</div>
 				)}
-				<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-neutral-50 p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
+				<div className="m-0 flex w-full flex-row items-center gap-2 rounded-r-md rounded-b-md bg-white p-2 text-gray-500 dark:bg-neutral-700 dark:text-gray-400">
 					{frameworks.map((fw) => {
 						const handleClick = () => {
 							setSelection(platform, fw);
@@ -66,7 +66,7 @@ export default function SDKSelector() {
 							<button
 								key={fw.id}
 								type="button"
-								className={`m-0 flex ${framework?.id === fw.id ? "text-blue-500 italic" : ""} text-md cursor-pointer items-center rounded-md bg-neutral-50 px-3 py-1 font-medium dark:bg-neutral-700`}
+								className={`m-0 flex ${framework?.id === fw.id ? "font-semibold text-blue-800 dark:text-blue-100" : ""} text-md cursor-pointer items-center rounded-md bg-white px-3 py-1 font-medium dark:bg-neutral-700`}
 								onClick={handleClick}
 							>
 								{fw.label}
diff --git a/src/components/realtimekit/RTKUIComponent/RTKUIComponent.astro b/src/components/realtimekit/RTKUIComponent/RTKUIComponent.astro
new file mode 100644
index 00000000000000..8d402868c422c7
--- /dev/null
+++ b/src/components/realtimekit/RTKUIComponent/RTKUIComponent.astro
@@ -0,0 +1,24 @@
+---
+interface Props {
+	id: string;
+	name: string;
+	imagePath: string;
+	componentName: string;
+}
+
+const { name, imagePath, componentName, id } = Astro.props;
+import UIComponent from "./RTKUIComponent.tsx";
+
+// Convert ~ alias to proper import path for Astro
+const resolvedImagePath = imagePath.startsWith("~/")
+	? imagePath.replace("~/", "/src/")
+	: imagePath;
+---
+
+<UIComponent
+	client:load
+	id={id}
+	name={name}
+	imagePath={resolvedImagePath}
+	componentName={componentName}
+/>
diff --git a/src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx b/src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx
new file mode 100644
index 00000000000000..a714c2cbfd14d4
--- /dev/null
+++ b/src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx
@@ -0,0 +1,91 @@
+interface Props {
+	id: string;
+	name: string;
+	imagePath: string;
+	componentName: string;
+}
+
+import { useMemo, useState } from "react";
+import { useFramework } from "../hooks/useFramework";
+
+const kebabToPascalCase = (str: string): string => {
+	return str
+		.split("-")
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+		.join("");
+};
+
+const RTKUIComponent = ({ id, imagePath, name, componentName }: Props) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const { platform, framework } = useFramework();
+
+	const component = useMemo(() => {
+		if (platform !== "web") return componentName;
+		if (framework.id === "react") return kebabToPascalCase(componentName);
+		return componentName;
+	}, [platform, framework, componentName]);
+
+	const toggleImageSize = () => {
+		setIsExpanded(!isExpanded);
+	};
+
+	return (
+		<div className="mt-2 flex flex-col items-center gap-3" id={id}>
+			{!isExpanded && (
+				<div className="relative">
+					<img
+						src={imagePath}
+						alt={name}
+						style={{ border: "solid 1px #ccc", width: "200px" }}
+						className={`w-full rounded-md transition-all duration-300 ease-in-out`}
+					/>
+					<button
+						onClick={toggleImageSize}
+						style={{ border: "solid 4px #fff" }}
+						className={`left-0" } absolute bottom-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-black/70 p-1 text-xs text-white`}
+					>
+						⛶
+					</button>
+				</div>
+			)}
+
+			{isExpanded && (
+				<div
+					className="flex flex-col items-center gap-4 rounded-md p-4"
+					style={{
+						width: "100%",
+						background: "white",
+						border: "solid 1px #ccc",
+					}}
+				>
+					<div className="relative">
+						<img
+							src={imagePath}
+							alt={name}
+							style={{
+								border: "solid 1px #ccc",
+								width: "100%",
+								height: "500px",
+							}}
+							className={`w-full rounded-md transition-all duration-300 ease-in-out`}
+						/>
+						<button
+							onClick={toggleImageSize}
+							style={{ border: "solid 4px #fff" }}
+							className={`left-0" } absolute bottom-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-black/70 p-1 text-xs text-white`}
+						>
+							−
+						</button>
+					</div>
+					<code className="w-fit rounded-sm bg-gray-100 p-1">{component}</code>
+				</div>
+			)}
+
+			{!isExpanded && (
+				<code className="w-fit rounded-sm bg-gray-100 p-1">{component}</code>
+			)}
+		</div>
+	);
+};
+
+export default RTKUIComponent;
diff --git a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.astro b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.astro
new file mode 100644
index 00000000000000..c13135dbaa1099
--- /dev/null
+++ b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.astro
@@ -0,0 +1,5 @@
+---
+import UIComponentGrid from "./RTKUIComponentGrid.tsx";
+---
+
+<UIComponentGrid client:load />
diff --git a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
new file mode 100644
index 00000000000000..a3635ae87f34ba
--- /dev/null
+++ b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
@@ -0,0 +1,536 @@
+import { useState, useMemo } from "react";
+import RTKUIComponent from "../RTKUIComponent/RTKUIComponent";
+
+const RTKUIComponentGrid = () => {
+	const [searchTerm, setSearchTerm] = useState("");
+	const basicComponents = [
+		{
+			id: "rtk-avatar",
+			name: "Avatar",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-avatar.svg",
+			componentName: "rtk-avatar",
+			tags: ["participant", "tile", "grid"],
+		},
+		{
+			id: "rtk-audio-visualizer",
+			name: "Audio Visualizer",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-audio-visualizer.svg",
+			componentName: "rtk-audio-visualizer",
+			tags: ["participant", "audio", "visualizer", "grid"],
+		},
+		{
+			id: "rtk-button",
+			name: "Button",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-button.svg",
+			componentName: "rtk-button",
+			tags: ["button", "controlbar", "controlbar-button"],
+		},
+		{
+			id: "rtk-clock",
+			name: "Clock",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-clock.svg",
+			componentName: "rtk-clock",
+			tags: ["clock", "header", "sidebar"],
+		},
+		{
+			id: "rtk-header",
+			name: "Header",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-header.svg",
+			componentName: "rtk-header",
+			tags: ["header", "sidebar"],
+		},
+		{
+			id: "rtk-logo",
+			name: "Logo",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-logo.svg",
+			componentName: "rtk-logo",
+			tags: ["logo", "header", "sidebar"],
+		},
+		{
+			id: "rtk-meeting-title",
+			name: "Meeting Title",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting-title.svg",
+			componentName: "rtk-meeting-title",
+			tags: ["meeting-title", "header", "sidebar"],
+		},
+		{
+			id: "rtk-recording-indicator",
+			name: "Recording Indicator",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-recording-indicator.svg",
+			componentName: "rtk-recording-indicator",
+			tags: ["recording", "indicator", "header", "sidebar", "controlbar"],
+		},
+		{
+			id: "rtk-spinner",
+			name: "Spinner",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-spinner.svg",
+			componentName: "rtk-spinner",
+			tags: ["spinner", "controlbar", "controlbar-button"],
+		},
+		{
+			id: "rtk-switch",
+			name: "Switch",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-switch.svg",
+			componentName: "rtk-switch",
+			tags: ["switch", "controlbar", "button"],
+		},
+		{
+			id: "rtk-tooltip",
+			name: "Tooltip",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-tooltip.svg",
+			componentName: "rtk-tooltip",
+			tags: ["tooltip", "controlbar", "button"],
+		},
+	];
+
+	const uiComponents = [
+		{
+			id: "rtk-controlbar",
+			name: "Control Bar",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar.svg",
+			componentName: "rtk-controlbar",
+			tags: ["controlbar", "button"],
+		},
+		{
+			id: "rtk-controlbar-button",
+			name: "Control Bar Button",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar-button.svg",
+			componentName: "rtk-controlbar-button",
+			tags: ["controlbar", "button"],
+		},
+		{
+			id: "rtk-dialog",
+			name: "Dialog",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-dialog.svg",
+			componentName: "rtk-dialog",
+			tags: ["dialog", "modal", "popup"],
+		},
+		{
+			id: "rtk-emoji-picker",
+			name: "Emoji Picker",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-emoji-picker.svg",
+			componentName: "rtk-emoji-picker",
+			tags: ["emoji-picker", "sidebar", "chat", "message"],
+		},
+		{
+			id: "rtk-grid-pagination",
+			name: "Grid Pagination",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-grid-pagination.svg",
+			componentName: "rtk-grid-pagination",
+			tags: ["pagination", "grid", "participant", "tile", "header"],
+		},
+		{
+			id: "rtk-menu",
+			name: "Menu",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-menu.svg",
+			componentName: "rtk-menu",
+			tags: ["menu", "sidebar", "controlbar", "button"],
+		},
+		{
+			id: "rtk-name-tag",
+			name: "Name Tag",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-name-tag.svg",
+			componentName: "rtk-name-tag",
+			tags: ["name-tag", "participant", "tile", "grid"],
+		},
+		{
+			id: "rtk-notification",
+			name: "Notification",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-notification.svg",
+			componentName: "rtk-notification",
+			tags: ["notification", "sidebar", "popup", "chat"],
+		},
+		{
+			id: "rtk-participant-count",
+			name: "Participant Count",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-count.svg",
+			componentName: "rtk-participant-count",
+			tags: ["participant-count", "header", "sidebar"],
+		},
+		{
+			id: "rtk-participant-tile",
+			name: "Participant Tile",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-tile.svg",
+			componentName: "rtk-participant-tile",
+			tags: ["participant-tile", "participant", "tile", "grid"],
+		},
+		{
+			id: "rtk-plugin-main",
+			name: "Plugin Main View",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-plugin-main.svg",
+			componentName: "rtk-plugin-main",
+			tags: ["plugin-main", "plugin", "sidebar", "controlbar", "button"],
+		},
+	];
+
+	const compositeComponents = [
+		{
+			id: "rtk-chat",
+			name: "Chat",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-chat.svg",
+			componentName: "rtk-chat",
+			tags: ["chat", "message", "sidebar"],
+		},
+		{
+			id: "rtk-grid",
+			name: "Grid",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-grid.svg",
+			componentName: "rtk-grid",
+			tags: ["grid", "participant", "tile", "layout"],
+		},
+		{
+			id: "rtk-image-viewer",
+			name: "Image Viewer",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-image-viewer.svg",
+			componentName: "rtk-image-viewer",
+			tags: ["image-viewer", "media", "chat", "sidebar"],
+		},
+		{
+			id: "rtk-leave-meeting",
+			name: "Leave Meeting",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-leave-meeting.svg",
+			componentName: "rtk-leave-meeting",
+			tags: ["leave", "dialog", "modal", "controlbar", "button", "end"],
+		},
+		{
+			id: "rtk-mixed-grid",
+			name: "Mixed Grid",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-mixed-grid.svg",
+			componentName: "rtk-mixed-grid",
+			tags: ["mixed", "grid", "participant", "tile", "layout"],
+		},
+		{
+			id: "rtk-participants",
+			name: "Participants",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participants.svg",
+			componentName: "rtk-participants",
+			tags: ["participants", "sidebar", "list", "participant", "tile"],
+		},
+		{
+			id: "rtk-participants-audio",
+			name: "Participants Audio",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participants-audio.svg",
+			componentName: "rtk-participants-audio",
+			tags: ["participants-audio", "audio", "sidebar", "participant", "list"],
+		},
+		{
+			id: "rtk-plugins",
+			name: "Plugins",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-plugins.svg",
+			componentName: "rtk-plugins",
+			tags: ["plugins", "sidebar", "list", "plugin"],
+		},
+		{
+			id: "rtk-polls",
+			name: "Polls",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-polls.svg",
+			componentName: "rtk-polls",
+			tags: ["polls", "sidebar", "voting", "interactive"],
+		},
+		{
+			id: "rtk-screenshare-view",
+			name: "Screenshare View",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-screenshare-view.svg",
+			componentName: "rtk-screenshare-view",
+			tags: ["screenshare-view", "screenshare", "media", "grid"],
+		},
+		{
+			id: "rtk-settings",
+			name: "Settings",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings.svg",
+			componentName: "rtk-settings",
+			tags: [
+				"settings",
+				"sidebar",
+				"configuration",
+				"preferences",
+				"dialog",
+				"modal",
+			],
+		},
+		{
+			id: "rtk-settings-audio",
+			name: "Settings Audio",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-audio.svg",
+			componentName: "rtk-settings-audio",
+			tags: [
+				"settings-audio",
+				"audio",
+				"settings",
+				"sidebar",
+				"configuration",
+				"dialog",
+				"modal",
+			],
+		},
+		{
+			id: "rtk-settings-video",
+			name: "Settings Video",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-video.svg",
+			componentName: "rtk-settings-video",
+			tags: [
+				"settings-video",
+				"video",
+				"settings",
+				"sidebar",
+				"configuration",
+				"dialog",
+				"modal",
+			],
+		},
+		{
+			id: "rtk-sidebar",
+			name: "Sidebar",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-sidebar.svg",
+			componentName: "rtk-sidebar",
+			tags: ["sidebar", "layout", "navigation", "panel"],
+		},
+		{
+			id: "rtk-simple-grid",
+			name: "Simple Grid",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-simple-grid.svg",
+			componentName: "rtk-simple-grid",
+			tags: ["simple", "grid", "participant", "tile", "layout", "basic"],
+		},
+		{
+			id: "rtk-spotlight-grid",
+			name: "Spotlight Grid",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-spotlight-grid.svg",
+			componentName: "rtk-spotlight-grid",
+			tags: ["spotlight", "grid", "participant", "tile", "layout", "pinned"],
+		},
+	];
+
+	const screenComponents = [
+		{
+			id: "rtk-ended-screen",
+			name: "Ended Screen",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-ended-screen.svg",
+			componentName: "rtk-ended-screen",
+			tags: ["ended", "screen", "meeting", "end", "leave"],
+		},
+		{
+			id: "rtk-idle-screen",
+			name: "Idle Screen",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-idle-screen.svg",
+			componentName: "rtk-idle-screen",
+			tags: ["idle", "screen", "waiting", "lobby", "standby"],
+		},
+		{
+			id: "rtk-meeting",
+			name: "Meeting Screen",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting.svg",
+			componentName: "rtk-meeting",
+			tags: ["meeting", "screen", "main", "active"],
+		},
+		{
+			id: "rtk-setup-screen",
+			name: "Setup Screen",
+			imagePath:
+				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-setup-screen.svg",
+			componentName: "rtk-setup-screen",
+			tags: ["setup", "screen", "configuration", "preview"],
+		},
+	];
+
+	// Filter function to search through components
+	const filterComponents = (components: typeof basicComponents) => {
+		if (!searchTerm.trim()) return components;
+
+		const lowercaseSearch = searchTerm.toLowerCase();
+		return components.filter((component) => {
+			// Search in name
+			if (component.name.toLowerCase().includes(lowercaseSearch)) return true;
+			// Search in component name
+			if (component.componentName.toLowerCase().includes(lowercaseSearch))
+				return true;
+			// Search in tags
+			if (
+				component.tags.some((tag) =>
+					tag.toLowerCase().includes(lowercaseSearch),
+				)
+			)
+				return true;
+			return false;
+		});
+	};
+
+	// Filtered component arrays
+	const filteredBasicComponents = useMemo(
+		() => filterComponents(basicComponents),
+		[searchTerm],
+	);
+	const filteredUiComponents = useMemo(
+		() => filterComponents(uiComponents),
+		[searchTerm],
+	);
+	const filteredCompositeComponents = useMemo(
+		() => filterComponents(compositeComponents),
+		[searchTerm],
+	);
+	const filteredScreenComponents = useMemo(
+		() => filterComponents(screenComponents),
+		[searchTerm],
+	);
+
+	return (
+		<div>
+			<h2 className="mb-2 text-2xl font-bold">Component Gallery</h2>
+			<p className="mb-4">
+				{" "}
+				Search through the comoponent gallery for the component you need.
+			</p>
+			<input
+				className="mb-6 w-full rounded-md bg-neutral-50 p-1 px-2"
+				style={{ border: "solid 1px #ccc" }}
+				placeholder="Search for 'Chat'"
+				value={searchTerm}
+				onChange={(e) => setSearchTerm(e.target.value)}
+			/>
+
+			{/* Show no results message if search term exists but no components found */}
+			{searchTerm.trim() &&
+				filteredBasicComponents.length === 0 &&
+				filteredUiComponents.length === 0 &&
+				filteredCompositeComponents.length === 0 &&
+				filteredScreenComponents.length === 0 && (
+					<div className="py-8 text-center">
+						<p className="text-gray-500">
+							No components found for "{searchTerm}"
+						</p>
+						<p className="mt-2 text-sm text-gray-400">
+							Try searching for terms like "grid", "chat", "button", or
+							"settings"
+						</p>
+					</div>
+				)}
+
+			{/* Basic Components */}
+			{filteredBasicComponents.length > 0 && (
+				<>
+					<h2 className="mb-2 text-2xl font-bold">Basic Components</h2>
+					<p className="mb-4 text-gray-600">
+						Small, reusable building blocks for your UI.
+					</p>
+					<div className="flex flex-wrap items-start gap-4">
+						{filteredBasicComponents.map((component) => (
+							<RTKUIComponent
+								key={component.id}
+								id={component.id}
+								name={component.name}
+								imagePath={component.imagePath}
+								componentName={component.componentName}
+							/>
+						))}
+					</div>
+				</>
+			)}
+
+			{/* UI Components */}
+			{filteredUiComponents.length > 0 && (
+				<>
+					<h2 className="mb-2 text-2xl font-bold">UI Components</h2>
+					<p className="mb-4 text-gray-600">
+						Interactive controls and interface elements.
+					</p>
+					<div className="flex flex-wrap items-start gap-4">
+						{filteredUiComponents.map((component) => (
+							<RTKUIComponent
+								key={component.id}
+								id={component.id}
+								name={component.name}
+								imagePath={component.imagePath}
+								componentName={component.componentName}
+							/>
+						))}
+					</div>
+				</>
+			)}
+
+			{/* Composite Components */}
+			{filteredCompositeComponents.length > 0 && (
+				<>
+					<h2 className="mb-2 text-2xl font-bold">Composite Components</h2>
+					<p className="mb-4 text-gray-600">
+						Complete, feature-rich components combining multiple elements.
+					</p>
+					<div className="flex flex-wrap items-start gap-4">
+						{filteredCompositeComponents.map((component) => (
+							<RTKUIComponent
+								key={component.id}
+								id={component.id}
+								name={component.name}
+								imagePath={component.imagePath}
+								componentName={component.componentName}
+							/>
+						))}
+					</div>
+				</>
+			)}
+
+			{/* Screen Components */}
+			{filteredScreenComponents.length > 0 && (
+				<>
+					<h2 className="mb-2 text-2xl font-bold">Screen Components</h2>
+					<p className="mb-4 text-gray-600">
+						Full-screen views for different meeting states.
+					</p>
+					<div className="flex flex-wrap items-start gap-4">
+						{filteredScreenComponents.map((component) => (
+							<RTKUIComponent
+								key={component.id}
+								id={component.id}
+								name={component.name}
+								imagePath={component.imagePath}
+								componentName={component.componentName}
+							/>
+						))}
+					</div>
+				</>
+			)}
+		</div>
+	);
+};
+
+export default RTKUIComponentGrid;
diff --git a/src/content/docs/realtime/realtimekit/ui-kit/component-library.mdx b/src/content/docs/realtime/realtimekit/ui-kit/component-library.mdx
index 635b145159df3f..4c1a7df2a0cd28 100644
--- a/src/content/docs/realtime/realtimekit/ui-kit/component-library.mdx
+++ b/src/content/docs/realtime/realtimekit/ui-kit/component-library.mdx
@@ -6,13 +6,14 @@ sidebar:
   order: 3
 ---
 
-import { Tabs, TabItem } from "~/components";
-
-<Tabs>
-<TabItem syncKey="realtimeKitFrameworkTypeTabs" label="Web Frameworks">
+import RTKSDKSelector from "~/components/realtimekit/RTKSDKSelector/RTKSDKSelector.astro";
+import RTKUIComponent from "~/components/realtimekit/RTKUIComponent/RTKUIComponent.astro";
+import RTKUIComponentGrid from "~/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.astro";
 
 The UI Kit components library provides a comprehensive set of pre-built, customizable components that you can use to build your own custom meeting interface.
 
+<RTKSDKSelector />
+
 :::note
 All UI Kit components are built on top of Web Components, regardless of which framework (React/Angular) you use. They render as Web Components in the browser DOM.
 
@@ -24,271 +25,4 @@ All UI Kit components are built on top of Web Components, regardless of which fr
 React and Angular components are wrappers around the same underlying Web Components, so functionality is identical across all frameworks.
 :::
 
-## Basic Components
-
-Small, reusable building blocks for your UI.
-
-<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
-
-<div style="text-align: center;" id="rtk-audio-visualizer">
-	![Audio
-	Visualizer](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-audio-visualizer.svg)
-	`rtk-audio-visualizer`
-</div>
-
-<div style="text-align: center;" id="rtk-avatar">
-	![Avatar](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-avatar.svg)
-	`rtk-avatar`
-</div>
-
-<div style="text-align: center;" id="rtk-button">
-	![Button](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-button.svg)
-	`rtk-button`
-</div>
-
-<div style="text-align: center;" id="rtk-clock">
-	![Clock](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-clock.svg)
-	`rtk-clock`
-</div>
-
-<div style="text-align: center;" id="rtk-header">
-	![Header](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-header.svg)
-	`rtk-header`
-</div>
-
-<div style="text-align: center;" id="rtk-logo">
-	![Logo](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-logo.svg)
-	`rtk-logo`
-</div>
-
-<div style="text-align: center;" id="rtk-meeting-title">
-	![Meeting
-	Title](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting-title.svg)
-	`rtk-meeting-title`
-</div>
-
-<div style="text-align: center;" id="rtk-recording-indicator">
-	![Recording
-	Indicator](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-recording-indicator.svg)
-	`rtk-recording-indicator`
-</div>
-
-<div style="text-align: center;" id="rtk-spinner">
-	![Spinner](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-spinner.svg)
-	`rtk-spinner`
-</div>
-
-<div style="text-align: center;" id="rtk-switch">
-	![Switch](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-switch.svg)
-	`rtk-switch`
-</div>
-
-<div style="text-align: center;" id="rtk-tooltip">
-	![Tooltip](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-tooltip.svg)
-	`rtk-tooltip`
-</div>
-
-</div>
-
-## UI Components
-
-Interactive controls and interface elements.
-
-<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
-
-<div style="text-align: center;" id="rtk-controlbar">
-	![Control
-	Bar](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar.svg)
-	`rtk-controlbar`
-</div>
-
-<div style="text-align: center;" id="rtk-controlbar-button">
-	![Control Bar
-	Button](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar-button.svg)
-	`rtk-controlbar-button`
-</div>
-
-<div style="text-align: center;" id="rtk-dialog">
-	![Dialog](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-dialog.svg)
-	`rtk-dialog`
-</div>
-
-<div style="text-align: center;" id="rtk-emoji-picker">
-	![Emoji
-	Picker](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-emoji-picker.svg)
-	`rtk-emoji-picker`
-</div>
-
-<div style="text-align: center;" id="rtk-grid-pagination">
-	![Grid
-	Pagination](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-grid-pagination.svg)
-	`rtk-grid-pagination`
-</div>
-
-<div style="text-align: center;" id="rtk-menu">
-	![Menu](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-menu.svg)
-	`rtk-menu`
-</div>
-
-<div style="text-align: center;" id="rtk-name-tag">
-	![Name
-	Tag](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-name-tag.svg)
-	`rtk-name-tag`
-</div>
-
-<div style="text-align: center;" id="rtk-notification">
-	![Notification](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-notification.svg)
-	`rtk-notification`
-</div>
-
-<div style="text-align: center;" id="rtk-participant-count">
-	![Participant
-	Count](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-count.svg)
-	`rtk-participant-count`
-</div>
-
-<div style="text-align: center;" id="rtk-participant-tile">
-	![Participant
-	Tile](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-tile.svg)
-	`rtk-participant-tile`
-</div>
-
-<div style="text-align: center;" id="rtk-plugin-main">
-	![Plugin Main
-	View](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-plugin-main.svg)
-	`rtk-plugin-main`
-</div>
-
-</div>
-
-## Composite Components
-
-Complete, feature-rich components combining multiple elements.
-
-<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
-
-<div style="text-align: center;" id="rtk-chat">
-	![Chat](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-chat.svg)
-	`rtk-chat`
-</div>
-
-<div style="text-align: center;" id="rtk-grid">
-	![Grid](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-grid.svg)
-	`rtk-grid`
-</div>
-
-<div style="text-align: center;" id="rtk-image-viewer">
-	![Image
-	Viewer](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-image-viewer.svg)
-	`rtk-image-viewer`
-</div>
-
-<div style="text-align: center;" id="rtk-leave-meeting">
-	![Leave
-	Meeting](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-leave-meeting.svg)
-	`rtk-leave-meeting`
-</div>
-
-<div style="text-align: center;" id="rtk-mixed-grid">
-	![Mixed
-	Grid](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-mixed-grid.svg)
-	`rtk-mixed-grid`
-</div>
-
-<div style="text-align: center;" id="rtk-participants">
-	![Participants](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-participants.svg)
-	`rtk-participants`
-</div>
-
-<div style="text-align: center;" id="rtk-participants-audio">
-	![Participants
-	Audio](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-participants-audio.svg)
-	`rtk-participants-audio`
-</div>
-
-<div style="text-align: center;" id="rtk-plugins">
-	![Plugins](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-plugins.svg)
-	`rtk-plugins`
-</div>
-
-<div style="text-align: center;" id="rtk-polls">
-	![Polls](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-polls.svg)
-	`rtk-polls`
-</div>
-
-<div style="text-align: center;" id="rtk-screenshare-view">
-	![Screenshare
-	View](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-screenshare-view.svg)
-	`rtk-screenshare-view`
-</div>
-
-<div style="text-align: center;" id="rtk-settings">
-	![Settings](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings.svg)
-	`rtk-settings`
-</div>
-
-<div style="text-align: center;" id="rtk-settings-audio">
-	![Settings
-	Audio](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-audio.svg)
-	`rtk-settings-audio`
-</div>
-
-<div style="text-align: center;" id="rtk-settings-video">
-	![Settings
-	Video](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-video.svg)
-	`rtk-settings-video`
-</div>
-
-<div style="text-align: center;" id="rtk-sidebar">
-	![Sidebar](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-sidebar.svg)
-	`rtk-sidebar`
-</div>
-
-<div style="text-align: center;" id="rtk-simple-grid">
-	![Simple
-	Grid](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-simple-grid.svg)
-	`rtk-simple-grid`
-</div>
-
-<div style="text-align: center;" id="rtk-spotlight-grid">
-	![Spotlight
-	Grid](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-spotlight-grid.svg)
-	`rtk-spotlight-grid`
-</div>
-
-</div>
-
-## Screen Components
-
-Full-screen views for different meeting states.
-
-<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; margin: 2rem 0;">
-
-<div style="text-align: center;" id="rtk-ended-screen">
-	![Ended
-	Screen](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-ended-screen.svg)
-	`rtk-ended-screen`
-</div>
-
-<div style="text-align: center;" id="rtk-idle-screen">
-	![Idle
-	Screen](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-idle-screen.svg)
-	`rtk-idle-screen`
-</div>
-
-<div style="text-align: center;" id="rtk-meeting">
-	![Meeting
-	Screen](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting.svg)
-	`rtk-meeting`
-</div>
-
-<div style="text-align: center;" id="rtk-setup-screen">
-	![Setup
-	Screen](~/assets/images/realtime/realtimekit/web/components-gallery/rtk-setup-screen.svg)
-	`rtk-setup-screen`
-</div>
-
-</div>
-
-</TabItem>
-</Tabs>
+<RTKUIComponentGrid />

From e220aea4d0d2b407e94bbd388b0462c29a5dbbef Mon Sep 17 00:00:00 2001
From: ikabra <ikabra@cloudflare.com>
Date: Thu, 1 Jan 2026 18:27:01 +0530
Subject: [PATCH 2/5] fix: add dark mode colours

---
 .../RTKUIComponent/RTKUIComponent.tsx            | 12 ++++++++----
 .../RTKUIComponentGrid/RTKUIComponentGrid.tsx    | 16 +++++-----------
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx b/src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx
index a714c2cbfd14d4..3dd77b0c012a3f 100644
--- a/src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx
+++ b/src/components/realtimekit/RTKUIComponent/RTKUIComponent.tsx
@@ -42,7 +42,7 @@ const RTKUIComponent = ({ id, imagePath, name, componentName }: Props) => {
 					<button
 						onClick={toggleImageSize}
 						style={{ border: "solid 4px #fff" }}
-						className={`left-0" } absolute bottom-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-black/70 p-1 text-xs text-white`}
+						className={`absolute bottom-0 left-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md p-1 text-black`}
 					>
 						⛶
 					</button>
@@ -72,17 +72,21 @@ const RTKUIComponent = ({ id, imagePath, name, componentName }: Props) => {
 						<button
 							onClick={toggleImageSize}
 							style={{ border: "solid 4px #fff" }}
-							className={`left-0" } absolute bottom-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md bg-black/70 p-1 text-xs text-white`}
+							className={`absolute bottom-0 left-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-md p-1 text-black`}
 						>
 							−
 						</button>
 					</div>
-					<code className="w-fit rounded-sm bg-gray-100 p-1">{component}</code>
+					<code className="w-fit rounded-sm bg-gray-100 p-1 dark:bg-neutral-700">
+						{component}
+					</code>
 				</div>
 			)}
 
 			{!isExpanded && (
-				<code className="w-fit rounded-sm bg-gray-100 p-1">{component}</code>
+				<code className="w-fit rounded-sm bg-gray-100 p-1 dark:bg-neutral-700">
+					{component}
+				</code>
 			)}
 		</div>
 	);
diff --git a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
index a3635ae87f34ba..39b1bf4e2d9fce 100644
--- a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
+++ b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
@@ -418,12 +418,10 @@ const RTKUIComponentGrid = () => {
 		<div>
 			<h2 className="mb-2 text-2xl font-bold">Component Gallery</h2>
 			<p className="mb-4">
-				{" "}
 				Search through the comoponent gallery for the component you need.
 			</p>
 			<input
-				className="mb-6 w-full rounded-md bg-neutral-50 p-1 px-2"
-				style={{ border: "solid 1px #ccc" }}
+				className="mb-2 w-full rounded-md border bg-neutral-50 p-1 px-2 dark:border-neutral-600 dark:bg-neutral-800"
 				placeholder="Search for 'Chat'"
 				value={searchTerm}
 				onChange={(e) => setSearchTerm(e.target.value)}
@@ -450,9 +448,7 @@ const RTKUIComponentGrid = () => {
 			{filteredBasicComponents.length > 0 && (
 				<>
 					<h2 className="mb-2 text-2xl font-bold">Basic Components</h2>
-					<p className="mb-4 text-gray-600">
-						Small, reusable building blocks for your UI.
-					</p>
+					<p className="mb-4">Small, reusable building blocks for your UI.</p>
 					<div className="flex flex-wrap items-start gap-4">
 						{filteredBasicComponents.map((component) => (
 							<RTKUIComponent
@@ -471,9 +467,7 @@ const RTKUIComponentGrid = () => {
 			{filteredUiComponents.length > 0 && (
 				<>
 					<h2 className="mb-2 text-2xl font-bold">UI Components</h2>
-					<p className="mb-4 text-gray-600">
-						Interactive controls and interface elements.
-					</p>
+					<p className="mb-4">Interactive controls and interface elements.</p>
 					<div className="flex flex-wrap items-start gap-4">
 						{filteredUiComponents.map((component) => (
 							<RTKUIComponent
@@ -492,7 +486,7 @@ const RTKUIComponentGrid = () => {
 			{filteredCompositeComponents.length > 0 && (
 				<>
 					<h2 className="mb-2 text-2xl font-bold">Composite Components</h2>
-					<p className="mb-4 text-gray-600">
+					<p className="mb-4">
 						Complete, feature-rich components combining multiple elements.
 					</p>
 					<div className="flex flex-wrap items-start gap-4">
@@ -513,7 +507,7 @@ const RTKUIComponentGrid = () => {
 			{filteredScreenComponents.length > 0 && (
 				<>
 					<h2 className="mb-2 text-2xl font-bold">Screen Components</h2>
-					<p className="mb-4 text-gray-600">
+					<p className="mb-4">
 						Full-screen views for different meeting states.
 					</p>
 					<div className="flex flex-wrap items-start gap-4">

From 01f3b714b46a8d22505b20bb3a62e75685dcde3c Mon Sep 17 00:00:00 2001
From: ikabra <ikabra@cloudflare.com>
Date: Tue, 6 Jan 2026 12:20:17 +0530
Subject: [PATCH 3/5] fix: fix asset path

---
 .../RTKUIComponentGrid/RTKUIComponentGrid.tsx | 129 ++++++------------
 1 file changed, 45 insertions(+), 84 deletions(-)

diff --git a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
index 39b1bf4e2d9fce..8e7418a39293df 100644
--- a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
+++ b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
@@ -3,92 +3,84 @@ import RTKUIComponent from "../RTKUIComponent/RTKUIComponent";
 
 const RTKUIComponentGrid = () => {
 	const [searchTerm, setSearchTerm] = useState("");
+	const imagePath = (fileName: string) => {
+		return `~/assets/images/realtime/realtimekit/web/components-gallery/${fileName}`;
+	};
 	const basicComponents = [
 		{
 			id: "rtk-avatar",
 			name: "Avatar",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-avatar.svg",
+			imagePath: imagePath("rtk-avatar.svg"),
 			componentName: "rtk-avatar",
 			tags: ["participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-audio-visualizer",
 			name: "Audio Visualizer",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-audio-visualizer.svg",
+			imagePath: imagePath("rtk-audio-visualizer.svg"),
 			componentName: "rtk-audio-visualizer",
 			tags: ["participant", "audio", "visualizer", "grid"],
 		},
 		{
 			id: "rtk-button",
 			name: "Button",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-button.svg",
+			imagePath: imagePath("rtk-button.svg"),
 			componentName: "rtk-button",
 			tags: ["button", "controlbar", "controlbar-button"],
 		},
 		{
 			id: "rtk-clock",
 			name: "Clock",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-clock.svg",
+			imagePath: imagePath("rtk-clock.svg"),
 			componentName: "rtk-clock",
 			tags: ["clock", "header", "sidebar"],
 		},
 		{
 			id: "rtk-header",
 			name: "Header",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-header.svg",
+			imagePath: imagePath("rtk-header.svg"),
 			componentName: "rtk-header",
 			tags: ["header", "sidebar"],
 		},
 		{
 			id: "rtk-logo",
 			name: "Logo",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-logo.svg",
+			imagePath: imagePath("rtk-logo.svg"),
 			componentName: "rtk-logo",
 			tags: ["logo", "header", "sidebar"],
 		},
 		{
 			id: "rtk-meeting-title",
 			name: "Meeting Title",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting-title.svg",
+			imagePath: imagePath("rtk-meeting-title.svg"),
 			componentName: "rtk-meeting-title",
 			tags: ["meeting-title", "header", "sidebar"],
 		},
 		{
 			id: "rtk-recording-indicator",
 			name: "Recording Indicator",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-recording-indicator.svg",
+			imagePath: imagePath("rtk-recording-indicator.svg"),
 			componentName: "rtk-recording-indicator",
 			tags: ["recording", "indicator", "header", "sidebar", "controlbar"],
 		},
 		{
 			id: "rtk-spinner",
 			name: "Spinner",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-spinner.svg",
+			imagePath: imagePath("rtk-spinner.svg"),
 			componentName: "rtk-spinner",
 			tags: ["spinner", "controlbar", "controlbar-button"],
 		},
 		{
 			id: "rtk-switch",
 			name: "Switch",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-switch.svg",
+			imagePath: imagePath("rtk-switch.svg"),
 			componentName: "rtk-switch",
 			tags: ["switch", "controlbar", "button"],
 		},
 		{
 			id: "rtk-tooltip",
 			name: "Tooltip",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-tooltip.svg",
+			imagePath: imagePath("rtk-tooltip.svg"),
 			componentName: "rtk-tooltip",
 			tags: ["tooltip", "controlbar", "button"],
 		},
@@ -98,88 +90,77 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-controlbar",
 			name: "Control Bar",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar.svg",
+			imagePath: imagePath("rtk-controlbar.svg"),
 			componentName: "rtk-controlbar",
 			tags: ["controlbar", "button"],
 		},
 		{
 			id: "rtk-controlbar-button",
 			name: "Control Bar Button",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar-button.svg",
+			imagePath: imagePath("rtk-controlbar-button.svg"),
 			componentName: "rtk-controlbar-button",
 			tags: ["controlbar", "button"],
 		},
 		{
 			id: "rtk-dialog",
 			name: "Dialog",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-dialog.svg",
+			imagePath: imagePath("rtk-dialog.svg"),
 			componentName: "rtk-dialog",
 			tags: ["dialog", "modal", "popup"],
 		},
 		{
 			id: "rtk-emoji-picker",
 			name: "Emoji Picker",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-emoji-picker.svg",
+			imagePath: imagePath("rtk-emoji-picker.svg"),
 			componentName: "rtk-emoji-picker",
 			tags: ["emoji-picker", "sidebar", "chat", "message"],
 		},
 		{
 			id: "rtk-grid-pagination",
 			name: "Grid Pagination",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-grid-pagination.svg",
+			imagePath: imagePath("rtk-grid-pagination.svg"),
 			componentName: "rtk-grid-pagination",
 			tags: ["pagination", "grid", "participant", "tile", "header"],
 		},
 		{
 			id: "rtk-menu",
 			name: "Menu",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-menu.svg",
+			imagePath: imagePath("rtk-menu.svg"),
 			componentName: "rtk-menu",
 			tags: ["menu", "sidebar", "controlbar", "button"],
 		},
 		{
 			id: "rtk-name-tag",
 			name: "Name Tag",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-name-tag.svg",
+			imagePath: imagePath("rtk-name-tag.svg"),
 			componentName: "rtk-name-tag",
 			tags: ["name-tag", "participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-notification",
 			name: "Notification",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-notification.svg",
+			imagePath: imagePath("rtk-notification.svg"),
 			componentName: "rtk-notification",
 			tags: ["notification", "sidebar", "popup", "chat"],
 		},
 		{
 			id: "rtk-participant-count",
 			name: "Participant Count",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-count.svg",
+			imagePath: imagePath("rtk-participant-count.svg"),
 			componentName: "rtk-participant-count",
 			tags: ["participant-count", "header", "sidebar"],
 		},
 		{
 			id: "rtk-participant-tile",
 			name: "Participant Tile",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-tile.svg",
+			imagePath: imagePath("rtk-participant-tile.svg"),
 			componentName: "rtk-participant-tile",
 			tags: ["participant-tile", "participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-plugin-main",
 			name: "Plugin Main View",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-plugin-main.svg",
+			imagePath: imagePath("rtk-plugin-main.svg"),
 			componentName: "rtk-plugin-main",
 			tags: ["plugin-main", "plugin", "sidebar", "controlbar", "button"],
 		},
@@ -189,88 +170,77 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-chat",
 			name: "Chat",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-chat.svg",
+			imagePath: imagePath("rtk-chat.svg"),
 			componentName: "rtk-chat",
 			tags: ["chat", "message", "sidebar"],
 		},
 		{
 			id: "rtk-grid",
 			name: "Grid",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-grid.svg",
+			imagePath: imagePath("rtk-grid.svg"),
 			componentName: "rtk-grid",
 			tags: ["grid", "participant", "tile", "layout"],
 		},
 		{
 			id: "rtk-image-viewer",
 			name: "Image Viewer",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-image-viewer.svg",
+			imagePath: imagePath("rtk-image-viewer.svg"),
 			componentName: "rtk-image-viewer",
 			tags: ["image-viewer", "media", "chat", "sidebar"],
 		},
 		{
 			id: "rtk-leave-meeting",
 			name: "Leave Meeting",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-leave-meeting.svg",
+			imagePath: imagePath("rtk-leave-meeting.svg"),
 			componentName: "rtk-leave-meeting",
 			tags: ["leave", "dialog", "modal", "controlbar", "button", "end"],
 		},
 		{
 			id: "rtk-mixed-grid",
 			name: "Mixed Grid",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-mixed-grid.svg",
+			imagePath: imagePath("rtk-mixed-grid.svg"),
 			componentName: "rtk-mixed-grid",
 			tags: ["mixed", "grid", "participant", "tile", "layout"],
 		},
 		{
 			id: "rtk-participants",
 			name: "Participants",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participants.svg",
+			imagePath: imagePath("rtk-participants.svg"),
 			componentName: "rtk-participants",
 			tags: ["participants", "sidebar", "list", "participant", "tile"],
 		},
 		{
 			id: "rtk-participants-audio",
 			name: "Participants Audio",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-participants-audio.svg",
+			imagePath: imagePath("rtk-participants-audio.svg"),
 			componentName: "rtk-participants-audio",
 			tags: ["participants-audio", "audio", "sidebar", "participant", "list"],
 		},
 		{
 			id: "rtk-plugins",
 			name: "Plugins",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-plugins.svg",
+			imagePath: imagePath("rtk-plugins.svg"),
 			componentName: "rtk-plugins",
 			tags: ["plugins", "sidebar", "list", "plugin"],
 		},
 		{
 			id: "rtk-polls",
 			name: "Polls",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-polls.svg",
+			imagePath: imagePath("rtk-polls.svg"),
 			componentName: "rtk-polls",
 			tags: ["polls", "sidebar", "voting", "interactive"],
 		},
 		{
 			id: "rtk-screenshare-view",
 			name: "Screenshare View",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-screenshare-view.svg",
+			imagePath: imagePath("rtk-screenshare-view.svg"),
 			componentName: "rtk-screenshare-view",
 			tags: ["screenshare-view", "screenshare", "media", "grid"],
 		},
 		{
 			id: "rtk-settings",
 			name: "Settings",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings.svg",
+			imagePath: imagePath("rtk-settings.svg"),
 			componentName: "rtk-settings",
 			tags: [
 				"settings",
@@ -284,8 +254,7 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-settings-audio",
 			name: "Settings Audio",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-audio.svg",
+			imagePath: imagePath("rtk-settings-audio.svg"),
 			componentName: "rtk-settings-audio",
 			tags: [
 				"settings-audio",
@@ -300,8 +269,7 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-settings-video",
 			name: "Settings Video",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-video.svg",
+			imagePath: imagePath("rtk-settings-video.svg"),
 			componentName: "rtk-settings-video",
 			tags: [
 				"settings-video",
@@ -316,24 +284,21 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-sidebar",
 			name: "Sidebar",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-sidebar.svg",
+			imagePath: imagePath("rtk-sidebar.svg"),
 			componentName: "rtk-sidebar",
 			tags: ["sidebar", "layout", "navigation", "panel"],
 		},
 		{
 			id: "rtk-simple-grid",
 			name: "Simple Grid",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-simple-grid.svg",
+			imagePath: imagePath("rtk-simple-grid.svg"),
 			componentName: "rtk-simple-grid",
 			tags: ["simple", "grid", "participant", "tile", "layout", "basic"],
 		},
 		{
 			id: "rtk-spotlight-grid",
 			name: "Spotlight Grid",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-spotlight-grid.svg",
+			imagePath: imagePath("rtk-spotlight-grid.svg"),
 			componentName: "rtk-spotlight-grid",
 			tags: ["spotlight", "grid", "participant", "tile", "layout", "pinned"],
 		},
@@ -343,32 +308,28 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-ended-screen",
 			name: "Ended Screen",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-ended-screen.svg",
+			imagePath: imagePath("rtk-ended-screen.svg"),
 			componentName: "rtk-ended-screen",
 			tags: ["ended", "screen", "meeting", "end", "leave"],
 		},
 		{
 			id: "rtk-idle-screen",
 			name: "Idle Screen",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-idle-screen.svg",
+			imagePath: imagePath("rtk-idle-screen.svg"),
 			componentName: "rtk-idle-screen",
 			tags: ["idle", "screen", "waiting", "lobby", "standby"],
 		},
 		{
 			id: "rtk-meeting",
 			name: "Meeting Screen",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting.svg",
+			imagePath: imagePath("rtk-meeting.svg"),
 			componentName: "rtk-meeting",
 			tags: ["meeting", "screen", "main", "active"],
 		},
 		{
 			id: "rtk-setup-screen",
 			name: "Setup Screen",
-			imagePath:
-				"/src/assets/images/realtime/realtimekit/web/components-gallery/rtk-setup-screen.svg",
+			imagePath: imagePath("rtk-setup-screen.svg"),
 			componentName: "rtk-setup-screen",
 			tags: ["setup", "screen", "configuration", "preview"],
 		},

From 02cb3b9989d6555c149219f1383f897641b77fb7 Mon Sep 17 00:00:00 2001
From: ikabra <ikabra@cloudflare.com>
Date: Tue, 6 Jan 2026 12:28:37 +0530
Subject: [PATCH 4/5] fix: update image path

---
 .../RTKUIComponentGrid/RTKUIComponentGrid.tsx | 136 +++++++++++-------
 1 file changed, 88 insertions(+), 48 deletions(-)

diff --git a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
index 8e7418a39293df..8f437a3b3e5b11 100644
--- a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
+++ b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
@@ -1,246 +1,287 @@
 import { useState, useMemo } from "react";
 import RTKUIComponent from "../RTKUIComponent/RTKUIComponent";
 
+import rtkAvatar from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-avatar.svg";
+import rtkAudioVisualizer from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-audio-visualizer.svg";
+import rtkButton from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-button.svg";
+import rtkClock from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-clock.svg";
+import rtkHeader from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-header.svg";
+import rtkLogo from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-logo.svg";
+import rtkMeetingTitle from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting-title.svg";
+import rtkRecordingIndicator from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-recording-indicator.svg";
+import rtkSpinner from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-spinner.svg";
+import rtkSwitch from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-switch.svg";
+import rtkTooltip from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-tooltip.svg";
+
+import rtkControlbar from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar.svg";
+import rtkControlbarButton from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar-button.svg";
+import rtkDialog from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-dialog.svg";
+import rtkEmojiPicker from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-emoji-picker.svg";
+import rtkGridPagination from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-grid-pagination.svg";
+import rtkMenu from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-menu.svg";
+import rtkNameTag from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-name-tag.svg";
+import rtkNotification from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-notification.svg";
+import rtkParticipantCount from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-count.svg";
+import rtkParticipantTile from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-tile.svg";
+import rtkPluginMain from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-plugin-main.svg";
+
+import rtkChat from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-chat.svg";
+import rtkGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-grid.svg";
+import rtkImageViewer from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-image-viewer.svg";
+import rtkLeaveMeeting from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-leave-meeting.svg";
+import rtkMixedGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-mixed-grid.svg";
+import rtkParticipants from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participants.svg";
+import rtkParticipantsAudio from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participants-audio.svg";
+import rtkPlugins from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-plugins.svg";
+import rtkPolls from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-polls.svg";
+import rtkScreenshareView from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-screenshare-view.svg";
+import rtkSettings from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-settings.svg";
+import rtkSettingsAudio from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-audio.svg";
+import rtkSettingsVideo from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-video.svg";
+import rtkSidebar from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-sidebar.svg";
+import rtkSimpleGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-simple-grid.svg";
+import rtkSpotlightGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-spotlight-grid.svg";
+
+import rtkEndedScreen from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-ended-screen.svg";
+import rtkIdleScreen from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-idle-screen.svg";
+import rtkMeeting from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting.svg";
+import rtkSetupScreen from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-setup-screen.svg";
+
 const RTKUIComponentGrid = () => {
 	const [searchTerm, setSearchTerm] = useState("");
-	const imagePath = (fileName: string) => {
-		return `~/assets/images/realtime/realtimekit/web/components-gallery/${fileName}`;
-	};
 	const basicComponents = [
 		{
 			id: "rtk-avatar",
 			name: "Avatar",
-			imagePath: imagePath("rtk-avatar.svg"),
+			imagePath: rtkAvatar.src,
 			componentName: "rtk-avatar",
 			tags: ["participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-audio-visualizer",
 			name: "Audio Visualizer",
-			imagePath: imagePath("rtk-audio-visualizer.svg"),
+			imagePath: rtkAudioVisualizer.src,
 			componentName: "rtk-audio-visualizer",
 			tags: ["participant", "audio", "visualizer", "grid"],
 		},
 		{
 			id: "rtk-button",
 			name: "Button",
-			imagePath: imagePath("rtk-button.svg"),
+			imagePath: rtkButton.src,
 			componentName: "rtk-button",
 			tags: ["button", "controlbar", "controlbar-button"],
 		},
 		{
 			id: "rtk-clock",
 			name: "Clock",
-			imagePath: imagePath("rtk-clock.svg"),
+			imagePath: rtkClock.src,
 			componentName: "rtk-clock",
 			tags: ["clock", "header", "sidebar"],
 		},
 		{
 			id: "rtk-header",
 			name: "Header",
-			imagePath: imagePath("rtk-header.svg"),
+			imagePath: rtkHeader.src,
 			componentName: "rtk-header",
 			tags: ["header", "sidebar"],
 		},
 		{
 			id: "rtk-logo",
 			name: "Logo",
-			imagePath: imagePath("rtk-logo.svg"),
+			imagePath: rtkLogo.src,
 			componentName: "rtk-logo",
 			tags: ["logo", "header", "sidebar"],
 		},
 		{
 			id: "rtk-meeting-title",
 			name: "Meeting Title",
-			imagePath: imagePath("rtk-meeting-title.svg"),
+			imagePath: rtkMeetingTitle.src,
 			componentName: "rtk-meeting-title",
 			tags: ["meeting-title", "header", "sidebar"],
 		},
 		{
 			id: "rtk-recording-indicator",
 			name: "Recording Indicator",
-			imagePath: imagePath("rtk-recording-indicator.svg"),
+			imagePath: rtkRecordingIndicator.src,
 			componentName: "rtk-recording-indicator",
 			tags: ["recording", "indicator", "header", "sidebar", "controlbar"],
 		},
 		{
 			id: "rtk-spinner",
 			name: "Spinner",
-			imagePath: imagePath("rtk-spinner.svg"),
+			imagePath: rtkSpinner.src,
 			componentName: "rtk-spinner",
 			tags: ["spinner", "controlbar", "controlbar-button"],
 		},
 		{
 			id: "rtk-switch",
 			name: "Switch",
-			imagePath: imagePath("rtk-switch.svg"),
+			imagePath: rtkSwitch.src,
 			componentName: "rtk-switch",
 			tags: ["switch", "controlbar", "button"],
 		},
 		{
 			id: "rtk-tooltip",
 			name: "Tooltip",
-			imagePath: imagePath("rtk-tooltip.svg"),
+			imagePath: rtkTooltip.src,
 			componentName: "rtk-tooltip",
 			tags: ["tooltip", "controlbar", "button"],
 		},
 	];
-
 	const uiComponents = [
 		{
 			id: "rtk-controlbar",
 			name: "Control Bar",
-			imagePath: imagePath("rtk-controlbar.svg"),
+			imagePath: rtkControlbar.src,
 			componentName: "rtk-controlbar",
 			tags: ["controlbar", "button"],
 		},
 		{
 			id: "rtk-controlbar-button",
 			name: "Control Bar Button",
-			imagePath: imagePath("rtk-controlbar-button.svg"),
+			imagePath: rtkControlbarButton.src,
 			componentName: "rtk-controlbar-button",
 			tags: ["controlbar", "button"],
 		},
 		{
 			id: "rtk-dialog",
 			name: "Dialog",
-			imagePath: imagePath("rtk-dialog.svg"),
+			imagePath: rtkDialog.src,
 			componentName: "rtk-dialog",
 			tags: ["dialog", "modal", "popup"],
 		},
 		{
 			id: "rtk-emoji-picker",
 			name: "Emoji Picker",
-			imagePath: imagePath("rtk-emoji-picker.svg"),
+			imagePath: rtkEmojiPicker.src,
 			componentName: "rtk-emoji-picker",
 			tags: ["emoji-picker", "sidebar", "chat", "message"],
 		},
 		{
 			id: "rtk-grid-pagination",
 			name: "Grid Pagination",
-			imagePath: imagePath("rtk-grid-pagination.svg"),
+			imagePath: rtkGridPagination.src,
 			componentName: "rtk-grid-pagination",
 			tags: ["pagination", "grid", "participant", "tile", "header"],
 		},
 		{
 			id: "rtk-menu",
 			name: "Menu",
-			imagePath: imagePath("rtk-menu.svg"),
+			imagePath: rtkMenu.src,
 			componentName: "rtk-menu",
 			tags: ["menu", "sidebar", "controlbar", "button"],
 		},
 		{
 			id: "rtk-name-tag",
 			name: "Name Tag",
-			imagePath: imagePath("rtk-name-tag.svg"),
+			imagePath: rtkNameTag.src,
 			componentName: "rtk-name-tag",
 			tags: ["name-tag", "participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-notification",
 			name: "Notification",
-			imagePath: imagePath("rtk-notification.svg"),
+			imagePath: rtkNotification.src,
 			componentName: "rtk-notification",
 			tags: ["notification", "sidebar", "popup", "chat"],
 		},
 		{
 			id: "rtk-participant-count",
 			name: "Participant Count",
-			imagePath: imagePath("rtk-participant-count.svg"),
+			imagePath: rtkParticipantCount.src,
 			componentName: "rtk-participant-count",
 			tags: ["participant-count", "header", "sidebar"],
 		},
 		{
 			id: "rtk-participant-tile",
 			name: "Participant Tile",
-			imagePath: imagePath("rtk-participant-tile.svg"),
+			imagePath: rtkParticipantTile.src,
 			componentName: "rtk-participant-tile",
 			tags: ["participant-tile", "participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-plugin-main",
 			name: "Plugin Main View",
-			imagePath: imagePath("rtk-plugin-main.svg"),
+			imagePath: rtkPluginMain.src,
 			componentName: "rtk-plugin-main",
 			tags: ["plugin-main", "plugin", "sidebar", "controlbar", "button"],
 		},
 	];
-
 	const compositeComponents = [
 		{
 			id: "rtk-chat",
 			name: "Chat",
-			imagePath: imagePath("rtk-chat.svg"),
+			imagePath: rtkChat.src,
 			componentName: "rtk-chat",
 			tags: ["chat", "message", "sidebar"],
 		},
 		{
 			id: "rtk-grid",
 			name: "Grid",
-			imagePath: imagePath("rtk-grid.svg"),
+			imagePath: rtkGrid.src,
 			componentName: "rtk-grid",
 			tags: ["grid", "participant", "tile", "layout"],
 		},
 		{
 			id: "rtk-image-viewer",
 			name: "Image Viewer",
-			imagePath: imagePath("rtk-image-viewer.svg"),
+			imagePath: rtkImageViewer.src,
 			componentName: "rtk-image-viewer",
 			tags: ["image-viewer", "media", "chat", "sidebar"],
 		},
 		{
 			id: "rtk-leave-meeting",
 			name: "Leave Meeting",
-			imagePath: imagePath("rtk-leave-meeting.svg"),
+			imagePath: rtkLeaveMeeting.src,
 			componentName: "rtk-leave-meeting",
 			tags: ["leave", "dialog", "modal", "controlbar", "button", "end"],
 		},
 		{
 			id: "rtk-mixed-grid",
 			name: "Mixed Grid",
-			imagePath: imagePath("rtk-mixed-grid.svg"),
+			imagePath: rtkMixedGrid.src,
 			componentName: "rtk-mixed-grid",
 			tags: ["mixed", "grid", "participant", "tile", "layout"],
 		},
 		{
 			id: "rtk-participants",
 			name: "Participants",
-			imagePath: imagePath("rtk-participants.svg"),
+			imagePath: rtkParticipants.src,
 			componentName: "rtk-participants",
 			tags: ["participants", "sidebar", "list", "participant", "tile"],
 		},
 		{
 			id: "rtk-participants-audio",
 			name: "Participants Audio",
-			imagePath: imagePath("rtk-participants-audio.svg"),
+			imagePath: rtkParticipantsAudio.src,
 			componentName: "rtk-participants-audio",
 			tags: ["participants-audio", "audio", "sidebar", "participant", "list"],
 		},
 		{
 			id: "rtk-plugins",
 			name: "Plugins",
-			imagePath: imagePath("rtk-plugins.svg"),
+			imagePath: rtkPlugins.src,
 			componentName: "rtk-plugins",
 			tags: ["plugins", "sidebar", "list", "plugin"],
 		},
 		{
 			id: "rtk-polls",
 			name: "Polls",
-			imagePath: imagePath("rtk-polls.svg"),
+			imagePath: rtkPolls.src,
 			componentName: "rtk-polls",
 			tags: ["polls", "sidebar", "voting", "interactive"],
 		},
 		{
 			id: "rtk-screenshare-view",
 			name: "Screenshare View",
-			imagePath: imagePath("rtk-screenshare-view.svg"),
+			imagePath: rtkScreenshareView.src,
 			componentName: "rtk-screenshare-view",
 			tags: ["screenshare-view", "screenshare", "media", "grid"],
 		},
 		{
 			id: "rtk-settings",
 			name: "Settings",
-			imagePath: imagePath("rtk-settings.svg"),
+			imagePath: rtkSettings.src,
 			componentName: "rtk-settings",
 			tags: [
 				"settings",
@@ -254,7 +295,7 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-settings-audio",
 			name: "Settings Audio",
-			imagePath: imagePath("rtk-settings-audio.svg"),
+			imagePath: rtkSettingsAudio.src,
 			componentName: "rtk-settings-audio",
 			tags: [
 				"settings-audio",
@@ -269,7 +310,7 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-settings-video",
 			name: "Settings Video",
-			imagePath: imagePath("rtk-settings-video.svg"),
+			imagePath: rtkSettingsVideo.src,
 			componentName: "rtk-settings-video",
 			tags: [
 				"settings-video",
@@ -284,52 +325,51 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-sidebar",
 			name: "Sidebar",
-			imagePath: imagePath("rtk-sidebar.svg"),
+			imagePath: rtkSidebar.src,
 			componentName: "rtk-sidebar",
 			tags: ["sidebar", "layout", "navigation", "panel"],
 		},
 		{
 			id: "rtk-simple-grid",
 			name: "Simple Grid",
-			imagePath: imagePath("rtk-simple-grid.svg"),
+			imagePath: rtkSimpleGrid.src,
 			componentName: "rtk-simple-grid",
 			tags: ["simple", "grid", "participant", "tile", "layout", "basic"],
 		},
 		{
 			id: "rtk-spotlight-grid",
 			name: "Spotlight Grid",
-			imagePath: imagePath("rtk-spotlight-grid.svg"),
+			imagePath: rtkSpotlightGrid.src,
 			componentName: "rtk-spotlight-grid",
 			tags: ["spotlight", "grid", "participant", "tile", "layout", "pinned"],
 		},
 	];
-
 	const screenComponents = [
 		{
 			id: "rtk-ended-screen",
 			name: "Ended Screen",
-			imagePath: imagePath("rtk-ended-screen.svg"),
+			imagePath: rtkEndedScreen.src,
 			componentName: "rtk-ended-screen",
 			tags: ["ended", "screen", "meeting", "end", "leave"],
 		},
 		{
 			id: "rtk-idle-screen",
 			name: "Idle Screen",
-			imagePath: imagePath("rtk-idle-screen.svg"),
+			imagePath: rtkIdleScreen.src,
 			componentName: "rtk-idle-screen",
 			tags: ["idle", "screen", "waiting", "lobby", "standby"],
 		},
 		{
 			id: "rtk-meeting",
 			name: "Meeting Screen",
-			imagePath: imagePath("rtk-meeting.svg"),
+			imagePath: rtkMeeting.src,
 			componentName: "rtk-meeting",
 			tags: ["meeting", "screen", "main", "active"],
 		},
 		{
 			id: "rtk-setup-screen",
 			name: "Setup Screen",
-			imagePath: imagePath("rtk-setup-screen.svg"),
+			imagePath: rtkSetupScreen.src,
 			componentName: "rtk-setup-screen",
 			tags: ["setup", "screen", "configuration", "preview"],
 		},

From fa2582c6c005aca93b0ad1c547391184c77299d8 Mon Sep 17 00:00:00 2001
From: ikabra <ikabra@cloudflare.com>
Date: Tue, 6 Jan 2026 13:03:55 +0530
Subject: [PATCH 5/5] fix: update image imports

---
 .../RTKUIComponentGrid/RTKUIComponentGrid.tsx | 141 +++++++-----------
 1 file changed, 56 insertions(+), 85 deletions(-)

diff --git a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
index 8f437a3b3e5b11..7b7aa39d59278d 100644
--- a/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
+++ b/src/components/realtimekit/RTKUIComponentGrid/RTKUIComponentGrid.tsx
@@ -1,51 +1,22 @@
 import { useState, useMemo } from "react";
 import RTKUIComponent from "../RTKUIComponent/RTKUIComponent";
 
-import rtkAvatar from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-avatar.svg";
-import rtkAudioVisualizer from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-audio-visualizer.svg";
-import rtkButton from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-button.svg";
-import rtkClock from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-clock.svg";
-import rtkHeader from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-header.svg";
-import rtkLogo from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-logo.svg";
-import rtkMeetingTitle from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting-title.svg";
-import rtkRecordingIndicator from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-recording-indicator.svg";
-import rtkSpinner from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-spinner.svg";
-import rtkSwitch from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-switch.svg";
-import rtkTooltip from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-tooltip.svg";
+const componentGalleryImageModules = import.meta.glob(
+	"../../../assets/images/realtime/realtimekit/web/components-gallery/*.svg",
+	{ eager: true },
+);
 
-import rtkControlbar from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar.svg";
-import rtkControlbarButton from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-controlbar-button.svg";
-import rtkDialog from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-dialog.svg";
-import rtkEmojiPicker from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-emoji-picker.svg";
-import rtkGridPagination from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-grid-pagination.svg";
-import rtkMenu from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-menu.svg";
-import rtkNameTag from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-name-tag.svg";
-import rtkNotification from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-notification.svg";
-import rtkParticipantCount from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-count.svg";
-import rtkParticipantTile from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participant-tile.svg";
-import rtkPluginMain from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-plugin-main.svg";
+const componentGalleryImageSrcByFileName = Object.fromEntries(
+	Object.entries(componentGalleryImageModules).map(([path, mod]) => {
+		const fileName = path.split("/").pop() as string;
+		const defaultExport = (mod as any).default;
+		const src = defaultExport?.src ?? defaultExport;
+		return [fileName, src];
+	}),
+) as Record<string, string>;
 
-import rtkChat from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-chat.svg";
-import rtkGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-grid.svg";
-import rtkImageViewer from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-image-viewer.svg";
-import rtkLeaveMeeting from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-leave-meeting.svg";
-import rtkMixedGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-mixed-grid.svg";
-import rtkParticipants from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participants.svg";
-import rtkParticipantsAudio from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-participants-audio.svg";
-import rtkPlugins from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-plugins.svg";
-import rtkPolls from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-polls.svg";
-import rtkScreenshareView from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-screenshare-view.svg";
-import rtkSettings from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-settings.svg";
-import rtkSettingsAudio from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-audio.svg";
-import rtkSettingsVideo from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-settings-video.svg";
-import rtkSidebar from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-sidebar.svg";
-import rtkSimpleGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-simple-grid.svg";
-import rtkSpotlightGrid from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-spotlight-grid.svg";
-
-import rtkEndedScreen from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-ended-screen.svg";
-import rtkIdleScreen from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-idle-screen.svg";
-import rtkMeeting from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-meeting.svg";
-import rtkSetupScreen from "../../../assets/images/realtime/realtimekit/web/components-gallery/rtk-setup-screen.svg";
+const imageSrc = (fileName: string) =>
+	componentGalleryImageSrcByFileName[fileName];
 
 const RTKUIComponentGrid = () => {
 	const [searchTerm, setSearchTerm] = useState("");
@@ -53,77 +24,77 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-avatar",
 			name: "Avatar",
-			imagePath: rtkAvatar.src,
+			imagePath: imageSrc("rtk-avatar.svg"),
 			componentName: "rtk-avatar",
 			tags: ["participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-audio-visualizer",
 			name: "Audio Visualizer",
-			imagePath: rtkAudioVisualizer.src,
+			imagePath: imageSrc("rtk-audio-visualizer.svg"),
 			componentName: "rtk-audio-visualizer",
 			tags: ["participant", "audio", "visualizer", "grid"],
 		},
 		{
 			id: "rtk-button",
 			name: "Button",
-			imagePath: rtkButton.src,
+			imagePath: imageSrc("rtk-button.svg"),
 			componentName: "rtk-button",
 			tags: ["button", "controlbar", "controlbar-button"],
 		},
 		{
 			id: "rtk-clock",
 			name: "Clock",
-			imagePath: rtkClock.src,
+			imagePath: imageSrc("rtk-clock.svg"),
 			componentName: "rtk-clock",
 			tags: ["clock", "header", "sidebar"],
 		},
 		{
 			id: "rtk-header",
 			name: "Header",
-			imagePath: rtkHeader.src,
+			imagePath: imageSrc("rtk-header.svg"),
 			componentName: "rtk-header",
 			tags: ["header", "sidebar"],
 		},
 		{
 			id: "rtk-logo",
 			name: "Logo",
-			imagePath: rtkLogo.src,
+			imagePath: imageSrc("rtk-logo.svg"),
 			componentName: "rtk-logo",
 			tags: ["logo", "header", "sidebar"],
 		},
 		{
 			id: "rtk-meeting-title",
 			name: "Meeting Title",
-			imagePath: rtkMeetingTitle.src,
+			imagePath: imageSrc("rtk-meeting-title.svg"),
 			componentName: "rtk-meeting-title",
 			tags: ["meeting-title", "header", "sidebar"],
 		},
 		{
 			id: "rtk-recording-indicator",
 			name: "Recording Indicator",
-			imagePath: rtkRecordingIndicator.src,
+			imagePath: imageSrc("rtk-recording-indicator.svg"),
 			componentName: "rtk-recording-indicator",
 			tags: ["recording", "indicator", "header", "sidebar", "controlbar"],
 		},
 		{
 			id: "rtk-spinner",
 			name: "Spinner",
-			imagePath: rtkSpinner.src,
+			imagePath: imageSrc("rtk-spinner.svg"),
 			componentName: "rtk-spinner",
 			tags: ["spinner", "controlbar", "controlbar-button"],
 		},
 		{
 			id: "rtk-switch",
 			name: "Switch",
-			imagePath: rtkSwitch.src,
+			imagePath: imageSrc("rtk-switch.svg"),
 			componentName: "rtk-switch",
 			tags: ["switch", "controlbar", "button"],
 		},
 		{
 			id: "rtk-tooltip",
 			name: "Tooltip",
-			imagePath: rtkTooltip.src,
+			imagePath: imageSrc("rtk-tooltip.svg"),
 			componentName: "rtk-tooltip",
 			tags: ["tooltip", "controlbar", "button"],
 		},
@@ -132,77 +103,77 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-controlbar",
 			name: "Control Bar",
-			imagePath: rtkControlbar.src,
+			imagePath: imageSrc("rtk-controlbar.svg"),
 			componentName: "rtk-controlbar",
 			tags: ["controlbar", "button"],
 		},
 		{
 			id: "rtk-controlbar-button",
 			name: "Control Bar Button",
-			imagePath: rtkControlbarButton.src,
+			imagePath: imageSrc("rtk-controlbar-button.svg"),
 			componentName: "rtk-controlbar-button",
 			tags: ["controlbar", "button"],
 		},
 		{
 			id: "rtk-dialog",
 			name: "Dialog",
-			imagePath: rtkDialog.src,
+			imagePath: imageSrc("rtk-dialog.svg"),
 			componentName: "rtk-dialog",
 			tags: ["dialog", "modal", "popup"],
 		},
 		{
 			id: "rtk-emoji-picker",
 			name: "Emoji Picker",
-			imagePath: rtkEmojiPicker.src,
+			imagePath: imageSrc("rtk-emoji-picker.svg"),
 			componentName: "rtk-emoji-picker",
 			tags: ["emoji-picker", "sidebar", "chat", "message"],
 		},
 		{
 			id: "rtk-grid-pagination",
 			name: "Grid Pagination",
-			imagePath: rtkGridPagination.src,
+			imagePath: imageSrc("rtk-grid-pagination.svg"),
 			componentName: "rtk-grid-pagination",
 			tags: ["pagination", "grid", "participant", "tile", "header"],
 		},
 		{
 			id: "rtk-menu",
 			name: "Menu",
-			imagePath: rtkMenu.src,
+			imagePath: imageSrc("rtk-menu.svg"),
 			componentName: "rtk-menu",
 			tags: ["menu", "sidebar", "controlbar", "button"],
 		},
 		{
 			id: "rtk-name-tag",
 			name: "Name Tag",
-			imagePath: rtkNameTag.src,
+			imagePath: imageSrc("rtk-name-tag.svg"),
 			componentName: "rtk-name-tag",
 			tags: ["name-tag", "participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-notification",
 			name: "Notification",
-			imagePath: rtkNotification.src,
+			imagePath: imageSrc("rtk-notification.svg"),
 			componentName: "rtk-notification",
 			tags: ["notification", "sidebar", "popup", "chat"],
 		},
 		{
 			id: "rtk-participant-count",
 			name: "Participant Count",
-			imagePath: rtkParticipantCount.src,
+			imagePath: imageSrc("rtk-participant-count.svg"),
 			componentName: "rtk-participant-count",
 			tags: ["participant-count", "header", "sidebar"],
 		},
 		{
 			id: "rtk-participant-tile",
 			name: "Participant Tile",
-			imagePath: rtkParticipantTile.src,
+			imagePath: imageSrc("rtk-participant-tile.svg"),
 			componentName: "rtk-participant-tile",
 			tags: ["participant-tile", "participant", "tile", "grid"],
 		},
 		{
 			id: "rtk-plugin-main",
 			name: "Plugin Main View",
-			imagePath: rtkPluginMain.src,
+			imagePath: imageSrc("rtk-plugin-main.svg"),
 			componentName: "rtk-plugin-main",
 			tags: ["plugin-main", "plugin", "sidebar", "controlbar", "button"],
 		},
@@ -211,77 +182,77 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-chat",
 			name: "Chat",
-			imagePath: rtkChat.src,
+			imagePath: imageSrc("rtk-chat.svg"),
 			componentName: "rtk-chat",
 			tags: ["chat", "message", "sidebar"],
 		},
 		{
 			id: "rtk-grid",
 			name: "Grid",
-			imagePath: rtkGrid.src,
+			imagePath: imageSrc("rtk-grid.svg"),
 			componentName: "rtk-grid",
 			tags: ["grid", "participant", "tile", "layout"],
 		},
 		{
 			id: "rtk-image-viewer",
 			name: "Image Viewer",
-			imagePath: rtkImageViewer.src,
+			imagePath: imageSrc("rtk-image-viewer.svg"),
 			componentName: "rtk-image-viewer",
 			tags: ["image-viewer", "media", "chat", "sidebar"],
 		},
 		{
 			id: "rtk-leave-meeting",
 			name: "Leave Meeting",
-			imagePath: rtkLeaveMeeting.src,
+			imagePath: imageSrc("rtk-leave-meeting.svg"),
 			componentName: "rtk-leave-meeting",
 			tags: ["leave", "dialog", "modal", "controlbar", "button", "end"],
 		},
 		{
 			id: "rtk-mixed-grid",
 			name: "Mixed Grid",
-			imagePath: rtkMixedGrid.src,
+			imagePath: imageSrc("rtk-mixed-grid.svg"),
 			componentName: "rtk-mixed-grid",
 			tags: ["mixed", "grid", "participant", "tile", "layout"],
 		},
 		{
 			id: "rtk-participants",
 			name: "Participants",
-			imagePath: rtkParticipants.src,
+			imagePath: imageSrc("rtk-participants.svg"),
 			componentName: "rtk-participants",
 			tags: ["participants", "sidebar", "list", "participant", "tile"],
 		},
 		{
 			id: "rtk-participants-audio",
 			name: "Participants Audio",
-			imagePath: rtkParticipantsAudio.src,
+			imagePath: imageSrc("rtk-participants-audio.svg"),
 			componentName: "rtk-participants-audio",
 			tags: ["participants-audio", "audio", "sidebar", "participant", "list"],
 		},
 		{
 			id: "rtk-plugins",
 			name: "Plugins",
-			imagePath: rtkPlugins.src,
+			imagePath: imageSrc("rtk-plugins.svg"),
 			componentName: "rtk-plugins",
 			tags: ["plugins", "sidebar", "list", "plugin"],
 		},
 		{
 			id: "rtk-polls",
 			name: "Polls",
-			imagePath: rtkPolls.src,
+			imagePath: imageSrc("rtk-polls.svg"),
 			componentName: "rtk-polls",
 			tags: ["polls", "sidebar", "voting", "interactive"],
 		},
 		{
 			id: "rtk-screenshare-view",
 			name: "Screenshare View",
-			imagePath: rtkScreenshareView.src,
+			imagePath: imageSrc("rtk-screenshare-view.svg"),
 			componentName: "rtk-screenshare-view",
 			tags: ["screenshare-view", "screenshare", "media", "grid"],
 		},
 		{
 			id: "rtk-settings",
 			name: "Settings",
-			imagePath: rtkSettings.src,
+			imagePath: imageSrc("rtk-settings.svg"),
 			componentName: "rtk-settings",
 			tags: [
 				"settings",
@@ -295,7 +266,7 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-settings-audio",
 			name: "Settings Audio",
-			imagePath: rtkSettingsAudio.src,
+			imagePath: imageSrc("rtk-settings-audio.svg"),
 			componentName: "rtk-settings-audio",
 			tags: [
 				"settings-audio",
@@ -310,7 +281,7 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-settings-video",
 			name: "Settings Video",
-			imagePath: rtkSettingsVideo.src,
+			imagePath: imageSrc("rtk-settings-video.svg"),
 			componentName: "rtk-settings-video",
 			tags: [
 				"settings-video",
@@ -325,21 +296,21 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-sidebar",
 			name: "Sidebar",
-			imagePath: rtkSidebar.src,
+			imagePath: imageSrc("rtk-sidebar.svg"),
 			componentName: "rtk-sidebar",
 			tags: ["sidebar", "layout", "navigation", "panel"],
 		},
 		{
 			id: "rtk-simple-grid",
 			name: "Simple Grid",
-			imagePath: rtkSimpleGrid.src,
+			imagePath: imageSrc("rtk-simple-grid.svg"),
 			componentName: "rtk-simple-grid",
 			tags: ["simple", "grid", "participant", "tile", "layout", "basic"],
 		},
 		{
 			id: "rtk-spotlight-grid",
 			name: "Spotlight Grid",
-			imagePath: rtkSpotlightGrid.src,
+			imagePath: imageSrc("rtk-spotlight-grid.svg"),
 			componentName: "rtk-spotlight-grid",
 			tags: ["spotlight", "grid", "participant", "tile", "layout", "pinned"],
 		},
@@ -348,28 +319,28 @@ const RTKUIComponentGrid = () => {
 		{
 			id: "rtk-ended-screen",
 			name: "Ended Screen",
-			imagePath: rtkEndedScreen.src,
+			imagePath: imageSrc("rtk-ended-screen.svg"),
 			componentName: "rtk-ended-screen",
 			tags: ["ended", "screen", "meeting", "end", "leave"],
 		},
 		{
 			id: "rtk-idle-screen",
 			name: "Idle Screen",
-			imagePath: rtkIdleScreen.src,
+			imagePath: imageSrc("rtk-idle-screen.svg"),
 			componentName: "rtk-idle-screen",
 			tags: ["idle", "screen", "waiting", "lobby", "standby"],
 		},
 		{
 			id: "rtk-meeting",
 			name: "Meeting Screen",
-			imagePath: rtkMeeting.src,
+			imagePath: imageSrc("rtk-meeting.svg"),
 			componentName: "rtk-meeting",
 			tags: ["meeting", "screen", "main", "active"],
 		},
 		{
 			id: "rtk-setup-screen",
 			name: "Setup Screen",
-			imagePath: rtkSetupScreen.src,
+			imagePath: imageSrc("rtk-setup-screen.svg"),
 			componentName: "rtk-setup-screen",
 			tags: ["setup", "screen", "configuration", "preview"],
 		},