{
  "name": "marquee-rtl-demo",
  "type": "registry:example",
  "registryDependencies": [
    "marquee"
  ],
  "files": [
    {
      "path": "examples/marquee-rtl-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport {\n  Marquee,\n  MarqueeContent,\n  MarqueeEdge,\n  MarqueeItem,\n} from \"@/registry/bases/radix/ui/marquee\";\n\nconst features = [\n  {\n    title: \"RTL Support\",\n    description:\n      \"Automatic right-to-left layout support with proper animation direction and gap handling.\",\n  },\n  {\n    title: \"Smooth Animation\",\n    description:\n      \"Seamless scrolling animation that adapts to text direction without any visual gaps.\",\n  },\n  {\n    title: \"Auto Fill\",\n    description:\n      \"Intelligent content duplication to fill the available space for continuous scrolling.\",\n  },\n  {\n    title: \"Pause on Hover\",\n    description:\n      \"Interactive animation that pauses when users hover over the content for better UX.\",\n  },\n  {\n    title: \"Responsive Design\",\n    description:\n      \"Fully responsive component that works perfectly across all device sizes and orientations.\",\n  },\n];\n\nexport default function MarqueeRtlDemo() {\n  return (\n    <Marquee dir=\"rtl\">\n      <MarqueeContent>\n        {features.map((feature) => (\n          <MarqueeItem key={feature.title} asChild>\n            <div className=\"flex w-[280px] flex-col gap-1 rounded-md border bg-card p-4 text-card-foreground shadow-sm\">\n              <div className=\"text-sm leading-tight font-medium sm:text-base\">\n                {feature.title}\n              </div>\n              <span className=\"line-clamp-2 text-sm text-muted-foreground\">\n                {feature.description}\n              </span>\n            </div>\n          </MarqueeItem>\n        ))}\n      </MarqueeContent>\n      <MarqueeEdge side=\"left\" />\n      <MarqueeEdge side=\"right\" />\n    </Marquee>\n  );\n}\n",
      "target": ""
    }
  ]
}