shadcn/app/public/registry/styles/default/marquee.json

{
  "name": "marquee",
  "description": "Scrolling marquee text",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "name": "marquee.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {\n  repeat?: number\n  reverse?: boolean\n  pauseOnHover?: boolean\n  vertical?: boolean\n}\n\nconst Marquee = React.forwardRef<HTMLDivElement, MarqueeProps>(\n  (\n    {\n      className,\n      children,\n      repeat = 2,\n      reverse = false,\n      pauseOnHover = false,\n      vertical = false,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"group flex overflow-hidden\",\n          vertical ? \"flex-col\" : \"flex-row\",\n          className\n        )}\n        {...props}\n      >\n        {Array.from({ length: repeat }).map((_, i) => (\n          <div\n            key={i}\n            className={cn(\n              \"flex shrink-0\",\n              vertical\n                ? \"animate-marquee-vertical flex-col\"\n                : \"animate-marquee\",\n              reverse &&\n                (vertical\n                  ? \"[animation-direction:reverse]\"\n                  : \"[animation-direction:reverse]\"),\n              pauseOnHover && \"group-hover:[animation-play-state:paused]\"\n            )}\n          >\n            {children}\n          </div>\n        ))}\n      </div>\n    )\n  }\n)\nMarquee.displayName = \"Marquee\"\n\nexport { Marquee }\n"
    }
  ],
  "type": "components:ui"
}