carousel-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-example",
  "title": "Carousel",
  "registryDependencies": [
    "card",
    "carousel",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-maia/examples/carousel-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/base-maia/ui/carousel\"\n\nexport default function CarouselExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <CarouselBasic />\n      <CarouselMultiple />\n      <CarouselWithGap />\n    </ExampleWrapper>\n  )\n}\n\nfunction CarouselBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\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 className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Carousel\n        className=\"mx-auto max-w-xs sm:max-w-sm\"\n        opts={{\n          align: \"start\",\n        }}\n      >\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"sm:basis-1/2 lg:basis-1/3\">\n              <div className=\"p-1\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-3xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n\nfunction CarouselWithGap() {\n  return (\n    <Example title=\"With Gap\">\n      <Carousel className=\"mx-auto max-w-xs sm:max-w-sm\">\n        <CarouselContent className=\"-ml-1\">\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index} className=\"pl-1 md:basis-1/2\">\n              <div className=\"p-1\">\n                <Card>\n                  <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                    <span className=\"text-2xl font-semibold\">{index + 1}</span>\n                  </CardContent>\n                </Card>\n              </div>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious className=\"hidden sm:inline-flex\" />\n        <CarouselNext className=\"hidden sm:inline-flex\" />\n      </Carousel>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}