{
  "name": "marquee-demo",
  "type": "registry:example",
  "registryDependencies": [
    "marquee"
  ],
  "files": [
    {
      "path": "examples/marquee-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 tricks = [\n  {\n    title: \"Kickflip\",\n    description:\n      \"A kickflip is a trick where you kick the board forward while jumping, and then land on the board with the other foot.\",\n  },\n  {\n    title: \"Heelflip\",\n    description:\n      \"A heelflip is a trick where you flip the board backwards while jumping, and then land on the board with the other foot.\",\n  },\n  {\n    title: \"Tre Flip\",\n    description:\n      \"A tre flip is a trick where you flip the board sideways while jumping, and then land on the board with the other foot.\",\n  },\n  {\n    title: \"FS 540\",\n    description:\n      \"A fs 540 is a trick where you flip the board 540 degrees while jumping, and then land on the board with the other foot.\",\n  },\n  {\n    title: \"360 Varial McTwist\",\n    description:\n      \"A 360 varial mc twist is a trick where you flip the board 360 degrees while jumping, and then land on the board with the other foot.\",\n  },\n];\n\nexport default function MarqueeDemo() {\n  return (\n    <Marquee\n      aria-label=\"Skateboard tricks showcase\"\n      pauseOnHover\n      pauseOnKeyboard\n    >\n      <MarqueeContent>\n        {tricks.map((trick) => (\n          <MarqueeItem key={trick.title} asChild>\n            <div className=\"flex w-[260px] 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                {trick.title}\n              </div>\n              <span className=\"line-clamp-2 text-sm text-muted-foreground\">\n                {trick.description}\n              </span>\n            </div>\n          </MarqueeItem>\n        ))}\n      </MarqueeContent>\n      <MarqueeEdge side=\"left\" />\n      <MarqueeEdge side=\"right\" />\n    </Marquee>\n  );\n}\n",
      "target": ""
    }
  ]
}