carousel-plugin.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-plugin",
  "type": "registry:example",
  "registryDependencies": [
    "carousel"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/carousel-plugin.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Autoplay from \"embla-carousel-autoplay\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselPlugin() {\n  const plugin = React.useRef(\n    Autoplay({ delay: 2000, stopOnInteraction: true })\n  )\n\n  return (\n    <Carousel\n      plugins={[plugin.current]}\n      className=\"w-full max-w-xs\"\n      onMouseEnter={plugin.current.stop}\n      onMouseLeave={plugin.current.reset}\n    >\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, index) => (\n          <CarouselItem key={index}>\n            <div className=\"p-1\">\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </div>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}