diff --git a/.changeset/rude-phones-share.md b/.changeset/rude-phones-share.md
new file mode 100644
index 0000000..a8f959c
--- /dev/null
+++ b/.changeset/rude-phones-share.md
@@ -0,0 +1,5 @@
+---
+"@lemonsqueezy/wedges": patch
+---
+
+fix Loading component not showing on mobile devices
diff --git a/apps/docs/src/examples/index.ts b/apps/docs/src/examples/index.ts
index 30ef478..007a832 100644
--- a/apps/docs/src/examples/index.ts
+++ b/apps/docs/src/examples/index.ts
@@ -1621,23 +1621,27 @@ export function Example() {
     component: lazy(() => import("@/examples/kbd/example-1.tsx")),
     code: `import { Kbd } from "@lemonsqueezy/wedges";
 
-<div className="inline-flex items-center gap-4">
-  <Kbd keys={["option", "command"]} size="xs">
-    W
-  </Kbd>
-
-  <Kbd keys={["option", "command"]} size="sm">
-    D
-  </Kbd>
-
-  <Kbd keys={["option", "command"]} size="md">
-    G
-  </Kbd>
-
-  <Kbd keys={["option", "command"]} size="lg">
-    S
-  </Kbd>
-</div>;
+export function Example() {
+  return (
+    <div className="inline-flex items-center gap-4">
+      <Kbd keys={["option", "command"]} size="xs">
+        W
+      </Kbd>
+
+      <Kbd keys={["option", "command"]} size="sm">
+        D
+      </Kbd>
+
+      <Kbd keys={["option", "command"]} size="md">
+        G
+      </Kbd>
+
+      <Kbd keys={["option", "command"]} size="lg">
+        S
+      </Kbd>
+    </div>
+  );
+}
 `,
   },
   "kbd/preview": {
diff --git a/packages/wedges/src/components/Avatar/Avatar.test.tsx b/packages/wedges/src/components/Avatar/Avatar.test.tsx
index f99b4ae..ebb2431 100644
--- a/packages/wedges/src/components/Avatar/Avatar.test.tsx
+++ b/packages/wedges/src/components/Avatar/Avatar.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import React from "react";
+import * as React from "react";
 import { render, type RenderResult } from "@testing-library/react";
 
 import Avatar from "./Avatar";
diff --git a/packages/wedges/src/components/AvatarGroup/AvatarGroup.test.tsx b/packages/wedges/src/components/AvatarGroup/AvatarGroup.test.tsx
index ac47441..6bec768 100644
--- a/packages/wedges/src/components/AvatarGroup/AvatarGroup.test.tsx
+++ b/packages/wedges/src/components/AvatarGroup/AvatarGroup.test.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { render } from "@testing-library/react";
 
 import { AvatarGroup } from ".";
diff --git a/packages/wedges/src/components/Badge/Badge.test.tsx b/packages/wedges/src/components/Badge/Badge.test.tsx
index b3394bc..a799b6f 100644
--- a/packages/wedges/src/components/Badge/Badge.test.tsx
+++ b/packages/wedges/src/components/Badge/Badge.test.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { render } from "@testing-library/react";
 
 import { Badge } from ".";
diff --git a/packages/wedges/src/components/Label/Label.tsx b/packages/wedges/src/components/Label/Label.tsx
index 3d159d0..ececd78 100644
--- a/packages/wedges/src/components/Label/Label.tsx
+++ b/packages/wedges/src/components/Label/Label.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 
diff --git a/packages/wedges/src/components/Loading/Loading.tsx b/packages/wedges/src/components/Loading/Loading.tsx
index 8d23949..a0e4fe3 100644
--- a/packages/wedges/src/components/Loading/Loading.tsx
+++ b/packages/wedges/src/components/Loading/Loading.tsx
@@ -56,13 +56,13 @@ const Loading = React.forwardRef<LoadingElement, LoadingProps>((props, ref) => {
 
   switch (type) {
     case "line":
-      element = <Line className="animate-spin will-change-transform" size={size} />;
+      element = <Line className="h-full w-full animate-spin will-change-transform" size={size} />;
       break;
 
     case "spinner":
       element = (
         <Spinner
-          className="animate-[spin_.6s_ease-in-out_infinite] will-change-transform"
+          className="h-full w-full animate-[spin_.6s_ease-in-out_infinite] will-change-transform"
           size={size}
         />
       );
@@ -70,7 +70,10 @@ const Loading = React.forwardRef<LoadingElement, LoadingProps>((props, ref) => {
 
     case "dots":
       element = (
-        <Dots className="animate-[spin_1.25s_linear_infinite] will-change-transform" size={size} />
+        <Dots
+          className="h-full w-full animate-[spin_1.25s_linear_infinite] will-change-transform"
+          size={size}
+        />
       );
       break;
   }
diff --git a/packages/wedges/src/components/Tag/Tag.test.tsx b/packages/wedges/src/components/Tag/Tag.test.tsx
index 292f9c3..b8296b5 100644
--- a/packages/wedges/src/components/Tag/Tag.test.tsx
+++ b/packages/wedges/src/components/Tag/Tag.test.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { jest } from "@jest/globals";
 import { fireEvent, render } from "@testing-library/react";
 
diff --git a/packages/wedges/src/components/icons/types.ts b/packages/wedges/src/components/icons/types.ts
index db28d7e..144b630 100644
--- a/packages/wedges/src/components/icons/types.ts
+++ b/packages/wedges/src/components/icons/types.ts
@@ -1,7 +1,8 @@
-import { type SVGProps } from "react";
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import * as React from "react";
 
 export type IconProps = {
   color?: string;
   size?: number;
   title?: string;
-} & SVGProps<SVGSVGElement>;
+} & React.SVGProps<SVGSVGElement>;