{
  "name": "marquee-vertical-demo",
  "type": "registry:example",
  "registryDependencies": [
    "marquee"
  ],
  "files": [
    {
      "path": "examples/marquee-vertical-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 testimonials = [\n  {\n    name: \"Alex Johnson\",\n    role: \"Frontend Developer\",\n    company: \"TechCorp\",\n    content:\n      \"This component library has transformed our development workflow. The quality and attention to detail is outstanding.\",\n    avatar: \"AJ\",\n  },\n  {\n    name: \"Sarah Chen\",\n    role: \"Design Lead\",\n    company: \"StartupXYZ\",\n    content:\n      \"Beautiful components that are easy to customize. Our design system has never looked better.\",\n    avatar: \"SC\",\n  },\n  {\n    name: \"Michael Rodriguez\",\n    role: \"Full Stack Engineer\",\n    company: \"WebSolutions\",\n    content:\n      \"The accessibility features built into these components saved us weeks of development time.\",\n    avatar: \"MR\",\n  },\n  {\n    name: \"Emily Davis\",\n    role: \"Product Manager\",\n    company: \"InnovateLab\",\n    content:\n      \"Our team productivity increased significantly after adopting this component library.\",\n    avatar: \"ED\",\n  },\n  {\n    name: \"David Kim\",\n    role: \"Senior Developer\",\n    company: \"CodeCraft\",\n    content:\n      \"Clean, modern components with excellent TypeScript support. Highly recommended!\",\n    avatar: \"DK\",\n  },\n  {\n    name: \"Lisa Thompson\",\n    role: \"UI/UX Designer\",\n    company: \"DesignStudio\",\n    content:\n      \"The design tokens and theming system make it incredibly easy to maintain brand consistency.\",\n    avatar: \"LT\",\n  },\n];\n\nexport default function MarqueeVerticalDemo() {\n  return (\n    <Marquee side=\"bottom\" className=\"h-[320px]\">\n      <MarqueeContent>\n        {testimonials.map((testimonial) => (\n          <MarqueeItem key={testimonial.name} asChild>\n            <div className=\"flex w-full flex-col gap-3 rounded-lg border bg-card p-4 text-card-foreground shadow-sm\">\n              <div className=\"flex items-center gap-3\">\n                <div className=\"flex size-10 items-center justify-center rounded-full bg-primary text-sm font-medium text-primary-foreground\">\n                  {testimonial.avatar}\n                </div>\n                <div className=\"flex flex-col\">\n                  <div className=\"text-sm font-medium\">{testimonial.name}</div>\n                  <div className=\"text-xs text-muted-foreground\">\n                    {testimonial.role} at {testimonial.company}\n                  </div>\n                </div>\n              </div>\n              <p className=\"text-sm leading-relaxed text-muted-foreground\">\n                \"{testimonial.content}\"\n              </p>\n            </div>\n          </MarqueeItem>\n        ))}\n      </MarqueeContent>\n      <MarqueeEdge side=\"top\" />\n      <MarqueeEdge side=\"bottom\" />\n    </Marquee>\n  );\n}\n",
      "target": ""
    }
  ]
}