snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/registry/bases/aria/examples/carousel-example.tsx
+++ b/apps/v4/registry/bases/aria/examples/carousel-example.tsx
@@ -0,0 +1,99 @@
+import {
+  Example,
+  ExampleWrapper,
+} from "@/registry/bases/aria/components/example"
+import { Card, CardContent } from "@/registry/bases/aria/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/registry/bases/aria/ui/carousel"
+
+export default function CarouselExample() {
+  return (
+    <ExampleWrapper className="lg:grid-cols-1">
+      <CarouselBasic />
+      <CarouselMultiple />
+      <CarouselWithGap />
+    </ExampleWrapper>
+  )
+}
+
+function CarouselBasic() {
+  return (
+    <Example title="Basic">
+      <Carousel className="mx-auto max-w-xs sm:max-w-sm">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1 style-luma:p-2.5">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="hidden sm:inline-flex" />
+        <CarouselNext className="hidden sm:inline-flex" />
+      </Carousel>
+    </Example>
+  )
+}
+
+function CarouselMultiple() {
+  return (
+    <Example title="Multiple">
+      <Carousel
+        className="mx-auto max-w-xs sm:max-w-sm"
+        opts={{
+          align: "start",
+        }}
+      >
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="sm:basis-1/2 lg:basis-1/3">
+              <div className="p-1 style-luma:p-2.5">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-3xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="hidden sm:inline-flex" />
+        <CarouselNext className="hidden sm:inline-flex" />
+      </Carousel>
+    </Example>
+  )
+}
+
+function CarouselWithGap() {
+  return (
+    <Example title="With Gap">
+      <Carousel className="mx-auto max-w-xs sm:max-w-sm">
+        <CarouselContent className="-ml-1">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="pl-1 md:basis-1/2">
+              <div className="p-1 style-luma:p-2.5">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-2xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="hidden sm:inline-flex" />
+        <CarouselNext className="hidden sm:inline-flex" />
+      </Carousel>
+    </Example>
+  )
+}