feat: sync carousel component

.gitignore

@@ -31,6 +31,10 @@ Thumbs.db
 # Claude
 .claude
 logs
+trees/
+
+# Worktree environment configs
+**/.ports.env
 
 app.config.timestamp*
 

apps/docs/app.config.ts

@@ -20,7 +20,10 @@ export default defineConfig(
         }
       },
       vite: {
-        plugins: [tailwindcss()]
+        plugins: [tailwindcss()],
+        server: {
+          port: parseInt(process.env.FRONTEND_PORT || "5173", 10)
+        }
       }
     },
     {

apps/docs/package.json

@@ -23,6 +23,9 @@
     "@solidjs/start": "^1.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-autoplay": "^8.6.0",
+    "embla-carousel-solid": "^8.6.0",
     "lucide-solid": "^0.562.0",
     "rimraf": "^6.0.1",
     "solid-js": "^1.9.9",
@@ -38,7 +41,7 @@
     "tailwindcss": "^4.1.14",
     "tsx": "^4.20.6",
     "tw-animate-css": "^1.4.0",
-    "vite": "^6.3.5",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^6.3.5"
   }
 }

apps/docs/src/config/docs.ts

@@ -47,6 +47,11 @@ export const docsConfig: Config = {
           title: "Button",
           href: "/docs/components/button"
         },
+        {
+          title: "Carousel",
+          href: "/docs/components/carousel",
+          status: "new"
+        },
         {
           title: "Checkbox",
           href: "/docs/components/checkbox"

apps/docs/src/registry/__index__.tsx

@@ -74,6 +74,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "carousel": {
+    name: "carousel",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: ["button"],
+    component: lazy(() => import("~/registry/ui/carousel.tsx")),
+    files: [{
+      path: "registry/ui/carousel.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "checkbox": {
     name: "checkbox",
     description: "",
@@ -242,6 +256,90 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined,
   },
+  "carousel-demo": {
+    name: "carousel-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel","card"],
+    component: lazy(() => import("~/registry/examples/carousel-demo.tsx")),
+    files: [{
+      path: "registry/examples/carousel-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-size": {
+    name: "carousel-size",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel","card"],
+    component: lazy(() => import("~/registry/examples/carousel-size.tsx")),
+    files: [{
+      path: "registry/examples/carousel-size.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-spacing": {
+    name: "carousel-spacing",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel","card"],
+    component: lazy(() => import("~/registry/examples/carousel-spacing.tsx")),
+    files: [{
+      path: "registry/examples/carousel-spacing.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-orientation": {
+    name: "carousel-orientation",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel","card"],
+    component: lazy(() => import("~/registry/examples/carousel-orientation.tsx")),
+    files: [{
+      path: "registry/examples/carousel-orientation.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-api": {
+    name: "carousel-api",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel","card"],
+    component: lazy(() => import("~/registry/examples/carousel-api.tsx")),
+    files: [{
+      path: "registry/examples/carousel-api.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
+  "carousel-plugin": {
+    name: "carousel-plugin",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["carousel","card"],
+    component: lazy(() => import("~/registry/examples/carousel-plugin.tsx")),
+    files: [{
+      path: "registry/examples/carousel-plugin.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "button-default": {
     name: "button-default",
     description: "",

apps/docs/src/registry/examples/_registry.ts

@@ -23,6 +23,73 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "carousel-demo",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-size",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-size.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-spacing",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-spacing.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-orientation",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-orientation.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-api",
+    type: "registry:example",
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-api.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
+  {
+    name: "carousel-plugin",
+    type: "registry:example",
+    dependencies: ["embla-carousel-autoplay"],
+    registryDependencies: ["carousel", "card"],
+    files: [
+      {
+        path: "examples/carousel-plugin.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
   {
     name: "button-default",
     type: "registry:example",

apps/docs/src/registry/examples/carousel-api.tsx

@@ -0,0 +1,55 @@
+import { createEffect, createSignal, For, on } from "solid-js"
+
+import { Card, CardContent } from "~/registry/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi
+} from "~/registry/ui/carousel"
+
+export default function CarouselApiDemo() {
+  const [api, setApi] = createSignal<CarouselApi>()
+  const [current, setCurrent] = createSignal(0)
+  const [count, setCount] = createSignal(0)
+
+  createEffect(
+    on(api, (emblaApi) => {
+      if (!emblaApi) return
+
+      setCount(emblaApi.scrollSnapList().length)
+      setCurrent(emblaApi.selectedScrollSnap() + 1)
+
+      emblaApi.on("select", () => {
+        setCurrent(emblaApi.selectedScrollSnap() + 1)
+      })
+    })
+  )
+
+  return (
+    <div class="mx-auto max-w-xs">
+      <Carousel setApi={setApi} class="w-full max-w-xs">
+        <CarouselContent>
+          <For each={Array.from({ length: 5 })}>
+            {(_, index) => (
+              <CarouselItem>
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-4xl font-semibold">{index() + 1}</span>
+                  </CardContent>
+                </Card>
+              </CarouselItem>
+            )}
+          </For>
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <div class="text-muted-foreground py-2 text-center text-sm">
+        Slide {current()} of {count()}
+      </div>
+    </div>
+  )
+}

apps/docs/src/registry/examples/carousel-demo.tsx

@@ -0,0 +1,34 @@
+import { For } from "solid-js"
+
+import { Card, CardContent } from "~/registry/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+} from "~/registry/ui/carousel"
+
+export default function CarouselDemo() {
+  return (
+    <Carousel class="w-full max-w-xs">
+      <CarouselContent>
+        <For each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem>
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex aspect-square items-center justify-center p-6">
+                    <span class="text-4xl font-semibold">{index() + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </For>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}

apps/docs/src/registry/examples/carousel-orientation.tsx

@@ -0,0 +1,40 @@
+import { For } from "solid-js"
+
+import { Card, CardContent } from "~/registry/ui/card"
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious
+} from "~/registry/ui/carousel"
+
+export default function CarouselOrientation() {
+  return (
+    <Carousel
+      opts={{
+        align: "start"
+      }}
+      orientation="vertical"
+      class="w-full max-w-xs"
+    >
+      <CarouselContent class="-mt-1 h-[200px]">
+        <For each={Array.from({ length: 5 })}>
+          {(_, index) => (
+            <CarouselItem class="pt-1 md:basis-1/2">
+              <div class="p-1">
+                <Card>
+                  <CardContent class="flex items-center justify-center p-6">
+                    <span class="text-3xl font-semibold">{index() + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          )}
+        </For>
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}