From 97e2ef9eeee03eb1e4bb22beed7c372605a268e6 Mon Sep 17 00:00:00 2001
From: Elvin <163161110+M4sayev@users.noreply.github.com>
Date: Thu, 16 Apr 2026 00:09:43 +0400
Subject: [PATCH] fix NativeMarquee component demo mobile (#10)

---
 .../native/demo/native-marquee-demo.tsx       |  2 +-
 .../native/native-marquee-shadcnui.tsx        | 24 +++++++------------
 packages/registry/src/registry/native.tsx     |  2 +-
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/components/react-shadcn/src/components/native/demo/native-marquee-demo.tsx b/packages/components/react-shadcn/src/components/native/demo/native-marquee-demo.tsx
index 46099cd..a1e946f 100644
--- a/packages/components/react-shadcn/src/components/native/demo/native-marquee-demo.tsx
+++ b/packages/components/react-shadcn/src/components/native/demo/native-marquee-demo.tsx
@@ -43,7 +43,7 @@ export function NativeMarqueeVertical() {
     <div className="flex overflow-hidden gap-2 relative h-96">
       <SideFadeGradients isVertical={true} />
       <NativeMarquee gap={8} pauseOnTouch={true} pauseOnHover={true} items={ITEMS} isVertical={true}/>
-      <NativeMarquee gap={8} reverse={true} speed={5} items={ITEMS} isVertical={true}/>
+      <NativeMarquee gap={8} reverse={true} speed={5} items={ITEMS} isVertical={true} className="hidden sm:flex"/>
     </div>
   );
 }
diff --git a/packages/components/react-shadcn/src/components/native/native-marquee-shadcnui.tsx b/packages/components/react-shadcn/src/components/native/native-marquee-shadcnui.tsx
index 448f6f4..edbb71b 100644
--- a/packages/components/react-shadcn/src/components/native/native-marquee-shadcnui.tsx
+++ b/packages/components/react-shadcn/src/components/native/native-marquee-shadcnui.tsx
@@ -3,15 +3,7 @@
 import { cn } from "@/lib/utils";
 import { motion, useAnimate } from "framer-motion";
 
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-
-
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 interface NativeMarqueeItem {
   id: string;
@@ -31,13 +23,14 @@ interface NativeMarqueeProps {
 }
 
 function NativeMarquee({
+  items,
   speed = 10,
   gap = 2,
   isVertical = false,
   reverse = false,
   pauseOnHover = false,
   pauseOnTouch = false,
-  items,
+  className = "",
 }: NativeMarqueeProps) {
   const { containerRef, marqueeRef, multiplier, isMounted } = useMarquee({
     isVertical,
@@ -81,8 +74,8 @@ function NativeMarquee({
         {items.map((item) => (
           <li
             key={item.id}
-            className={
-              cn("flex items-center gap-2 ",
+            className={cn(
+              "flex items-center gap-2 ",
               "border border-border bg-background px-4 py-2 rounded-full text-sm text-muted-foreground whitespace-nowrap",
               "hover:bg-muted hover:border-foreground/20",
               isVertical ? "w-full justify-center" : ""
@@ -94,7 +87,7 @@ function NativeMarquee({
         ))}
       </ul>
     ),
-    [items]
+    [items, isVertical]
   );
 
   const copies = useCallback(
@@ -135,7 +128,8 @@ function NativeMarquee({
       ref={containerRef}
       className={cn(
         "flex shrink-0 grow-0 basis-auto overflow-hidden",
-        isVertical ? "flex-col h-full" : "w-full "
+        isVertical ? "flex-col h-full" : "w-full ",
+        className
       )}
       {...hoverProps}
       {...touchProps}
@@ -249,4 +243,4 @@ function SideFadeGradients({ isVertical = false }: { isVertical?: boolean }) {
     </>
   );
 }
-export { NativeMarquee, useMarquee, SideFadeGradients };
+export { NativeMarquee, SideFadeGradients, useMarquee };
diff --git a/packages/registry/src/registry/native.tsx b/packages/registry/src/registry/native.tsx
index 12ab9ff..11a59e5 100644
--- a/packages/registry/src/registry/native.tsx
+++ b/packages/registry/src/registry/native.tsx
@@ -844,7 +844,7 @@ export const nativeComponents: Component[] = [
         code: `
 <SideFadeGradients isVertical={true} />
 <NativeMarquee gap={8} pauseOnTouch={true} pauseOnHover={true} items={ITEMS} isVertical={true}/>
-<NativeMarquee gap={8} reverse={true} speed={5} items={ITEMS} isVertical={true}/>
+<NativeMarquee gap={8} reverse={true} speed={5} items={ITEMS} isVertical={true} className="hidden sm:flex"/>
         `,
       },
     ],