diff --git a/www/apps/ui/src/content/docs/utils/clx.mdx b/www/apps/ui/src/content/docs/utils/clx.mdx
index 1f95c92d75..21932fe929 100644
--- a/www/apps/ui/src/content/docs/utils/clx.mdx
+++ b/www/apps/ui/src/content/docs/utils/clx.mdx
@@ -12,12 +12,12 @@ The `clx` function is a utility function for working with classNames. It is buil
 import { clx } from "@medusajs/ui"
 
 type BoxProps = {
-    className?: string
-    children: React.ReactNode
-    mt?: "sm" | "md" | "lg"
+  className?: string
+  children: React.ReactNode
+  mt: "sm" | "md" | "lg"
 }
 
-const Box = ({ className, children }: BoxProps) => {
+const Box = ({ className, children, mt }: BoxProps) => {
   return (
     <div
       className={clx(
@@ -34,6 +34,7 @@ const Box = ({ className, children }: BoxProps) => {
     </div>
   )
 }
+
 ```
 
 In the above example the utility is used to apply a base style, a margin top that is dependent on the `mt` prop and a custom className.
diff --git a/www/apps/ui/src/registries/example-registry.tsx b/www/apps/ui/src/registries/example-registry.tsx
index 4ca975b17f..e01e9e117b 100644
--- a/www/apps/ui/src/registries/example-registry.tsx
+++ b/www/apps/ui/src/registries/example-registry.tsx
@@ -25,12 +25,12 @@ export const ExampleRegistry: Record<string, ExampleType> = {
   "alert-success": {
     name: "alert-success",
     component: React.lazy(async () => import("@/examples/alert-success")),
-    file: "src/examples/alert-demo.tsx",
+    file: "src/examples/alert-success.tsx",
   },
   "alert-warning": {
     name: "alert-warning",
     component: React.lazy(async () => import("@/examples/alert-warning")),
-    file: "src/examples/alert-demo.tsx",
+    file: "src/examples/alert-warning.tsx",
   },
   "avatar-demo": {
     name: "avatar-demo",