+ 
+
+ );
+ }
+
+ const anchor = (
+
+ {preview.title}
+
+ );
+ return (
+
+
+
+ );
+}
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.module.css b/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.module.css
new file mode 100644
index 0000000000..e6807a5afd
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.module.css
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.container {
+ .mx_LinkPreviewGroup_hide {
+ cursor: pointer;
+ width: 18px;
+ height: 18px;
+
+ svg {
+ flex: 0 0 40px;
+ visibility: hidden;
+ }
+ }
+
+ &:hover .mx_LinkPreviewGroup_hide svg,
+ .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
+ visibility: visible;
+ }
+}
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.stories.tsx b/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.stories.tsx
new file mode 100644
index 0000000000..2151d9f8f0
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/UrlPreviewView/UrlPreviewGroupView.stories.tsx
@@ -0,0 +1,97 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX } from "react";
+import { fn } from "storybook/test";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+
+import {
+ UrlPreviewGroupView,
+ type UrlPreviewGroupViewActions,
+ type UrlPreviewGroupViewSnapshot,
+} from "./UrlPreviewGroupView";
+import { useMockedViewModel } from "../../viewmodel";
+
+type UrlPreviewGroupViewProps = UrlPreviewGroupViewSnapshot & UrlPreviewGroupViewActions & { mediaVisible: boolean };
+
+const UrlPreviewGroupViewWrapper = ({
+ mediaVisible,
+ onHideClick,
+ onImageClick,
+ onTogglePreviewLimit,
+ ...rest
+}: UrlPreviewGroupViewProps): JSX.Element => {
+ const vm = useMockedViewModel(rest, {
+ onHideClick,
+ onImageClick,
+ onTogglePreviewLimit,
+ });
+ return
+ {img}
+
+ {hideButton}
+
+
+
+ {preview.showTooltipOnLink ? (
+ {anchor}
+ ) : (
+ anchor
+ )}
+ {preview.siteName && (
+ {" - " + preview.siteName}
+ )}
+
+ {preview.description && (
+
+ )}
+
+ {previews.map((preview, i) => (
+ vm.onImageClick(preview)}
+ {...preview}
+ />
+ ))}
+ {toggleButton}
+
+ );
+}
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/index.ts b/packages/shared-components/src/event-tiles/UrlPreviewView/index.ts
new file mode 100644
index 0000000000..7f732494e9
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/UrlPreviewView/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export {
+ UrlPreviewGroupView,
+ type UrlPreviewGroupViewSnapshot,
+ type UrlPreviewGroupViewProps,
+ type UrlPreviewGroupViewActions,
+} from "./UrlPreviewGroupView";
+
+export { type UrlPreviewViewSnapshotPreview } from "./types";
diff --git a/packages/shared-components/src/event-tiles/UrlPreviewView/types.ts b/packages/shared-components/src/event-tiles/UrlPreviewView/types.ts
new file mode 100644
index 0000000000..97b8f50453
--- /dev/null
+++ b/packages/shared-components/src/event-tiles/UrlPreviewView/types.ts
@@ -0,0 +1,30 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+export interface UrlPreviewViewSnapshotPreview {
+ /**
+ * The URL for the preview.
+ */
+ link: string;
+ /**
+ * Should the link have a tooltip. Should be `true` if the platform does not provide a tooltip.
+ */
+ showTooltipOnLink?: boolean;
+ /**
+ *
+ */
+ title: string;
+ siteName?: string;
+ description?: string;
+ image?: {
+ imageThumb: string;
+ imageFull: string;
+ fileSize?: number;
+ width?: number;
+ height?: number;
+ };
+}
diff --git a/packages/shared-components/src/index.ts b/packages/shared-components/src/index.ts
index 5ee6c4d7f2..90cea905cf 100644
--- a/packages/shared-components/src/index.ts
+++ b/packages/shared-components/src/index.ts
@@ -16,6 +16,7 @@ export * from "./crypto/SasEmoji";
export * from "./event-tiles/EncryptionEventView";
export * from "./event-tiles/EventTileBubble";
export * from "./event-tiles/TextualEventView";
+export * from "./event-tiles/UrlPreviewView";
export * from "./message-body/MediaBody";
export * from "./message-body/MessageTimestampView";
export * from "./message-body/DecryptionFailureBodyView";
diff --git a/packages/shared-components/test-results/.last-run.json b/packages/shared-components/test-results/.last-run.json
new file mode 100644
index 0000000000..5fca3f84bc
--- /dev/null
+++ b/packages/shared-components/test-results/.last-run.json
@@ -0,0 +1,4 @@
+{
+ "status": "failed",
+ "failedTests": []
+}
\ No newline at end of file