diff --git a/www/apps/api-reference/app/fonts.ts b/www/apps/api-reference/app/fonts.ts
new file mode 100644
index 0000000000..e6c4972f38
--- /dev/null
+++ b/www/apps/api-reference/app/fonts.ts
@@ -0,0 +1,12 @@
+import { Inter, Roboto_Mono } from "next/font/google"
+
+export const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+ weight: ["400", "500"],
+})
+
+export const robotoMono = Roboto_Mono({
+ subsets: ["latin"],
+ variable: "--font-roboto-mono",
+})
diff --git a/www/apps/api-reference/app/global-error.tsx b/www/apps/api-reference/app/global-error.tsx
new file mode 100644
index 0000000000..d6b2a13309
--- /dev/null
+++ b/www/apps/api-reference/app/global-error.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
+import clsx from "clsx"
+import "./globals.css"
+
+export default function Error() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/www/apps/api-reference/app/layout.tsx b/www/apps/api-reference/app/layout.tsx
index aff0e2ebac..e83ae89cf5 100644
--- a/www/apps/api-reference/app/layout.tsx
+++ b/www/apps/api-reference/app/layout.tsx
@@ -1,9 +1,9 @@
import "./globals.css"
import Providers from "../providers"
import { BareboneLayout, WideLayout } from "docs-ui"
-import { Inter, Roboto_Mono } from "next/font/google"
import clsx from "clsx"
import { Metadata } from "next"
+import { inter, robotoMono } from "./fonts"
const ogImage =
"https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg"
@@ -36,17 +36,6 @@ export const metadata: Metadata = {
},
}
-const inter = Inter({
- subsets: ["latin"],
- variable: "--font-inter",
- weight: ["400", "500"],
-})
-
-const robotoMono = Roboto_Mono({
- subsets: ["latin"],
- variable: "--font-roboto-mono",
-})
-
export default function RootLayout({
children,
}: {
diff --git a/www/apps/book/app/global-error.tsx b/www/apps/book/app/global-error.tsx
new file mode 100644
index 0000000000..d6b2a13309
--- /dev/null
+++ b/www/apps/book/app/global-error.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
+import clsx from "clsx"
+import "./globals.css"
+
+export default function Error() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/www/apps/cloud/app/fonts.ts b/www/apps/cloud/app/fonts.ts
new file mode 100644
index 0000000000..e6c4972f38
--- /dev/null
+++ b/www/apps/cloud/app/fonts.ts
@@ -0,0 +1,12 @@
+import { Inter, Roboto_Mono } from "next/font/google"
+
+export const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+ weight: ["400", "500"],
+})
+
+export const robotoMono = Roboto_Mono({
+ subsets: ["latin"],
+ variable: "--font-roboto-mono",
+})
diff --git a/www/apps/cloud/app/global-error.tsx b/www/apps/cloud/app/global-error.tsx
new file mode 100644
index 0000000000..d6b2a13309
--- /dev/null
+++ b/www/apps/cloud/app/global-error.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
+import clsx from "clsx"
+import "./globals.css"
+
+export default function Error() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/www/apps/cloud/app/layout.tsx b/www/apps/cloud/app/layout.tsx
index 6eb2bd5c82..5e50973837 100644
--- a/www/apps/cloud/app/layout.tsx
+++ b/www/apps/cloud/app/layout.tsx
@@ -1,11 +1,11 @@
import type { Metadata } from "next"
-import { Inter, Roboto_Mono } from "next/font/google"
import Providers from "@/providers"
import "./globals.css"
import { BareboneLayout, TightLayout } from "docs-ui"
import { config } from "@/config"
import clsx from "clsx"
import Footer from "../components/Footer"
+import { inter, robotoMono } from "./fonts"
const ogImage =
"https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg"
@@ -42,17 +42,6 @@ export const metadata: Metadata = {
},
}
-export const inter = Inter({
- subsets: ["latin"],
- variable: "--font-inter",
- weight: ["400", "500"],
-})
-
-export const robotoMono = Roboto_Mono({
- subsets: ["latin"],
- variable: "--font-roboto-mono",
-})
-
export default function RootLayout({
children,
}: {
diff --git a/www/apps/resources/app/fonts.ts b/www/apps/resources/app/fonts.ts
new file mode 100644
index 0000000000..e6c4972f38
--- /dev/null
+++ b/www/apps/resources/app/fonts.ts
@@ -0,0 +1,12 @@
+import { Inter, Roboto_Mono } from "next/font/google"
+
+export const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+ weight: ["400", "500"],
+})
+
+export const robotoMono = Roboto_Mono({
+ subsets: ["latin"],
+ variable: "--font-roboto-mono",
+})
diff --git a/www/apps/resources/app/global-error.tsx b/www/apps/resources/app/global-error.tsx
new file mode 100644
index 0000000000..d6b2a13309
--- /dev/null
+++ b/www/apps/resources/app/global-error.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
+import clsx from "clsx"
+import "./globals.css"
+
+export default function Error() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/www/apps/resources/app/layout.tsx b/www/apps/resources/app/layout.tsx
index e3e4540776..1e8f3cb58a 100644
--- a/www/apps/resources/app/layout.tsx
+++ b/www/apps/resources/app/layout.tsx
@@ -1,11 +1,11 @@
import type { Metadata } from "next"
-import { Inter, Roboto_Mono } from "next/font/google"
import Providers from "@/providers"
import "./globals.css"
import { BareboneLayout, TightLayout } from "docs-ui"
import { config } from "@/config"
import clsx from "clsx"
import Footer from "../components/Footer"
+import { inter, robotoMono } from "./fonts"
const ogImage =
"https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg"
@@ -42,17 +42,6 @@ export const metadata: Metadata = {
},
}
-export const inter = Inter({
- subsets: ["latin"],
- variable: "--font-inter",
- weight: ["400", "500"],
-})
-
-export const robotoMono = Roboto_Mono({
- subsets: ["latin"],
- variable: "--font-roboto-mono",
-})
-
export default function RootLayout({
children,
}: {
diff --git a/www/apps/resources/app/references/[...slug]/page.tsx b/www/apps/resources/app/references/[...slug]/page.tsx
index d645fb9ef5..27b50c81d2 100644
--- a/www/apps/resources/app/references/[...slug]/page.tsx
+++ b/www/apps/resources/app/references/[...slug]/page.tsx
@@ -1,5 +1,4 @@
-import { cache, Suspense } from "react"
-import { Loading } from "docs-ui"
+import { cache } from "react"
import path from "path"
import fs from "fs/promises"
import { ReferenceMDX } from "../../../components/ReferenceMDX"
diff --git a/www/apps/ui/app/fonts.ts b/www/apps/ui/app/fonts.ts
new file mode 100644
index 0000000000..e6c4972f38
--- /dev/null
+++ b/www/apps/ui/app/fonts.ts
@@ -0,0 +1,12 @@
+import { Inter, Roboto_Mono } from "next/font/google"
+
+export const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+ weight: ["400", "500"],
+})
+
+export const robotoMono = Roboto_Mono({
+ subsets: ["latin"],
+ variable: "--font-roboto-mono",
+})
diff --git a/www/apps/ui/app/global-error.tsx b/www/apps/ui/app/global-error.tsx
new file mode 100644
index 0000000000..d6b2a13309
--- /dev/null
+++ b/www/apps/ui/app/global-error.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
+import clsx from "clsx"
+import "./globals.css"
+
+export default function Error() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/www/apps/ui/app/layout.tsx b/www/apps/ui/app/layout.tsx
index a18fa25a58..a8645ca6c1 100644
--- a/www/apps/ui/app/layout.tsx
+++ b/www/apps/ui/app/layout.tsx
@@ -1,11 +1,11 @@
import type { Metadata } from "next"
-import { Inter, Roboto_Mono } from "next/font/google"
import Providers from "@/providers"
import "./globals.css"
import { BareboneLayout, TightLayout } from "docs-ui"
import { config } from "@/config"
import clsx from "clsx"
import Footer from "@/components/Footer"
+import { inter, robotoMono } from "./fonts"
const ogImage =
"https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg"
@@ -42,17 +42,6 @@ export const metadata: Metadata = {
},
}
-export const inter = Inter({
- subsets: ["latin"],
- variable: "--font-inter",
- weight: ["400", "500"],
-})
-
-export const robotoMono = Roboto_Mono({
- subsets: ["latin"],
- variable: "--font-roboto-mono",
-})
-
export default function RootLayout({
children,
}: {
diff --git a/www/apps/user-guide/app/fonts.ts b/www/apps/user-guide/app/fonts.ts
new file mode 100644
index 0000000000..e6c4972f38
--- /dev/null
+++ b/www/apps/user-guide/app/fonts.ts
@@ -0,0 +1,12 @@
+import { Inter, Roboto_Mono } from "next/font/google"
+
+export const inter = Inter({
+ subsets: ["latin"],
+ variable: "--font-inter",
+ weight: ["400", "500"],
+})
+
+export const robotoMono = Roboto_Mono({
+ subsets: ["latin"],
+ variable: "--font-roboto-mono",
+})
diff --git a/www/apps/user-guide/app/global-error.tsx b/www/apps/user-guide/app/global-error.tsx
new file mode 100644
index 0000000000..d6b2a13309
--- /dev/null
+++ b/www/apps/user-guide/app/global-error.tsx
@@ -0,0 +1,21 @@
+"use client"
+
+import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui"
+import { inter, robotoMono } from "./fonts"
+import clsx from "clsx"
+import "./globals.css"
+
+export default function Error() {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/www/apps/user-guide/app/layout.tsx b/www/apps/user-guide/app/layout.tsx
index 3759aa7522..88a9a2828a 100644
--- a/www/apps/user-guide/app/layout.tsx
+++ b/www/apps/user-guide/app/layout.tsx
@@ -1,11 +1,11 @@
import type { Metadata } from "next"
-import { Inter, Roboto_Mono } from "next/font/google"
import Providers from "@/providers"
import "./globals.css"
import { BareboneLayout, TightLayout } from "docs-ui"
import { config } from "@/config"
import clsx from "clsx"
import Footer from "../components/Footer"
+import { inter, robotoMono } from "./fonts"
const ogImage =
"https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg"
@@ -41,17 +41,6 @@ export const metadata: Metadata = {
},
}
-export const inter = Inter({
- subsets: ["latin"],
- variable: "--font-inter",
- weight: ["400", "500"],
-})
-
-export const robotoMono = Roboto_Mono({
- subsets: ["latin"],
- variable: "--font-roboto-mono",
-})
-
export default function RootLayout({
children,
}: {
diff --git a/www/packages/docs-ui/src/components/ErrorPage/Icon/index.tsx b/www/packages/docs-ui/src/components/ErrorPage/Icon/index.tsx
new file mode 100644
index 0000000000..de1a18e8b0
--- /dev/null
+++ b/www/packages/docs-ui/src/components/ErrorPage/Icon/index.tsx
@@ -0,0 +1,428 @@
+import React from "react"
+
+export const ErrorPageIcon = () => {
+ return (
+
+ )
+}
diff --git a/www/packages/docs-ui/src/components/ErrorPage/index.tsx b/www/packages/docs-ui/src/components/ErrorPage/index.tsx
new file mode 100644
index 0000000000..6f9cfcb885
--- /dev/null
+++ b/www/packages/docs-ui/src/components/ErrorPage/index.tsx
@@ -0,0 +1,32 @@
+import React from "react"
+import { ErrorPageIcon } from "./Icon"
+import Link from "next/link"
+import { Button } from "../Button"
+import { GITHUB_ISSUES_LINK } from "../../constants"
+
+export const ErrorPage = () => {
+ return (
+
+
+
+
+
+ Oops! Something went wrong.
+
+
+ Don’t worry. Our team have automatically been notified of this issue
+ and they are working on it. Please try again later.
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/www/packages/docs-ui/src/components/index.ts b/www/packages/docs-ui/src/components/index.ts
index cfe06c6705..35c0944daf 100644
--- a/www/packages/docs-ui/src/components/index.ts
+++ b/www/packages/docs-ui/src/components/index.ts
@@ -22,6 +22,7 @@ export * from "./Details/Summary"
export * from "./DetailsList"
export * from "./DottedSeparator"
export * from "./EditButton"
+export * from "./ErrorPage"
export * from "./Notices/ExpandableNotice"
export * from "./Notices/FeatureFlagNotice"
export * from "./Notices/DeprecatedNotice"