diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index f83a13a..58c63a6 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -78,9 +78,8 @@ export default function TopNav() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <Button variant="secondary" size="sm">
-                <GithubIcon size="14" className="mr-2" />
-                Star on GitHub
+              <Button variant="secondary" size="icon">
+                <GithubIcon size="14"/>
               </Button>
             </Link>
             <Button variant="secondary" size="icon" onClick={toggleTheme}>
diff --git a/components/retroui/Carousel.tsx b/components/retroui/Carousel.tsx
new file mode 100644
index 0000000..8e871bc
--- /dev/null
+++ b/components/retroui/Carousel.tsx
@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+    type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/retroui/Button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+    opts?: CarouselOptions
+    plugins?: CarouselPlugin
+    orientation?: "horizontal" | "vertical"
+    setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+    api: ReturnType<typeof useEmblaCarousel>[1]
+    scrollPrev: () => void
+    scrollNext: () => void
+    canScrollPrev: boolean
+    canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+    const context = React.useContext(CarouselContext)
+
+    if (!context) {
+        throw new Error("useCarousel must be used within a <Carousel />")
+    }
+
+    return context
+}
+
+function Carousel({
+    orientation = "horizontal",
+    opts,
+    setApi,
+    plugins,
+    className,
+    children,
+    ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+    const [carouselRef, api] = useEmblaCarousel(
+        {
+            ...opts,
+            axis: orientation === "horizontal" ? "x" : "y",
+        },
+        plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+        if (!api) return
+        setCanScrollPrev(api.canScrollPrev())
+        setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+        api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+        api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (event.key === "ArrowLeft") {
+                event.preventDefault()
+                scrollPrev()
+            } else if (event.key === "ArrowRight") {
+                event.preventDefault()
+                scrollNext()
+            }
+        },
+        [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+        if (!api || !setApi) return
+        setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+        if (!api) return
+        onSelect(api)
+        api.on("reInit", onSelect)
+        api.on("select", onSelect)
+
+        return () => {
+            api?.off("select", onSelect)
+        }
+    }, [api, onSelect])
+
+    return (
+        <CarouselContext.Provider
+            value={{
+                carouselRef,
+                api: api,
+                opts,
+                orientation:
+                    orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+                scrollPrev,
+                scrollNext,
+                canScrollPrev,
+                canScrollNext,
+            }}
+        >
+            <div
+                onKeyDownCapture={handleKeyDown}
+                className={cn("relative", className)}
+                role="region"
+                aria-roledescription="carousel"
+                data-slot="carousel"
+                {...props}
+            >
+                {children}
+            </div>
+        </CarouselContext.Provider>
+    )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+    const { carouselRef, orientation } = useCarousel()
+
+    return (
+        <div
+            ref={carouselRef}
+            className="overflow-hidden"
+            data-slot="carousel-content"
+        >
+            <div
+                className={cn(
+                    "flex",
+                    orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+                    className
+                )}
+                {...props}
+            />
+        </div>
+    )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+    const { orientation } = useCarousel()
+
+    return (
+        <div
+            role="group"
+            aria-roledescription="slide"
+            data-slot="carousel-item"
+            className={cn(
+                "min-w-0 shrink-0 grow-0 basis-full",
+                orientation === "horizontal" ? "pl-4" : "pt-4",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function CarouselPrevious({
+    className,
+    variant = "outline",
+    size = "icon",
+    ...props
+}: React.ComponentProps<typeof Button>) {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+    return (
+        <Button
+            data-slot="carousel-previous"
+            variant={variant}
+            size={size}
+            className={cn(
+                "absolute size-8 rounded",
+                orientation === "horizontal"
+                    ? "top-1/2 -left-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]"
+                    : "-top-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]",
+                className
+            )}
+            disabled={!canScrollPrev}
+            onClick={scrollPrev}
+            {...props}
+        >
+            <ArrowLeft />
+            <span className="sr-only">Previous slide</span>
+        </Button>
+    )
+}
+
+function CarouselNext({
+    className,
+    variant = "outline",
+    size = "icon",
+    ...props
+}: React.ComponentProps<typeof Button>) {
+    const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+    return (
+        <Button
+            data-slot="carousel-next"
+            variant={variant}
+            size={size}
+            className={cn(
+                "absolute size-8 rounded",
+                orientation === "horizontal"
+                    ? "top-1/2 -right-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]"
+                    : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]",
+                className
+            )}
+            disabled={!canScrollNext}
+            onClick={scrollNext}
+            {...props}
+        >
+            <ArrowRight />
+            <span className="sr-only">Next slide</span>
+        </Button>
+    )
+}
+
+const CarouselObject = Object.assign(Carousel, {
+    Content: CarouselContent,
+    Item: CarouselItem,
+    Previous: CarouselPrevious,
+    Next: CarouselNext,
+})
+
+export { CarouselObject as Carousel }
\ No newline at end of file
diff --git a/config/components.ts b/config/components.ts
index 03aed05..0128975 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -60,6 +60,10 @@ export const componentConfig: {
       name: "barChart",
       filePath: "components/retroui/charts/BarChart.tsx",
     },
+    carousel: {
+      name: "carousel",
+      filePath: "components/retroui/Carousel.tsx",
+    },
     checkbox: {
       name: "checkbox",
       filePath: "components/retroui/Checkbox.tsx",
@@ -295,6 +299,21 @@ export const componentConfig: {
       filePath: "preview/components/calendar-style-default.tsx",
       preview: lazy(() => import("@/preview/components/calendar-style-default")),
     },
+    "carousel-style-default": {
+      name: "carousel-style-default",
+      filePath: "preview/components/carousel-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/carousel-style-default")),
+    },
+    "carousel-style-sizes": {
+      name: "carousel-style-sizes",
+      filePath: "preview/components/carousel-style-sizes.tsx",
+      preview: lazy(() => import("@/preview/components/carousel-style-sizes")),
+    },
+    "carousel-style-vertical": {
+      name: "carousel-style-vertical",
+      filePath: "preview/components/carousel-style-vertical.tsx",
+      preview: lazy(() => import("@/preview/components/carousel-style-vertical")),
+    },
     "card-style-default": {
       name: "card-style-default",
       filePath: "preview/components/card-style-default.tsx",
diff --git a/config/navigation.ts b/config/navigation.ts
index 52788ad..0b6c286 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -52,6 +52,7 @@ export const navConfig: INavigationConfig = {
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
         { title: "Calendar", href: `${componentsRoute}/calendar`, tag: "New" },
+        { title: "Carousel", href: `${componentsRoute}/carousel`, tag: "New" },
         { title: "Checkbox", href: `${componentsRoute}/checkbox` },
         { title: "Command", href: `${componentsRoute}/command` },
         { title: "Dialog", href: `${componentsRoute}/dialog` },
diff --git a/content/docs/components/carousel.mdx b/content/docs/components/carousel.mdx
new file mode 100644
index 0000000..a0104f7
--- /dev/null
+++ b/content/docs/components/carousel.mdx
@@ -0,0 +1,54 @@
+---
+title: Carousel
+description: Let your users select a date to cancel subscription.
+lastUpdated: 14 Nov, 2025
+---
+
+<ComponentShowcase name="carousel-style-default" />
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add @retroui/carousel" />
+  <ComponentInstall.Manual>
+  
+#### 1. Install dependencies:
+
+```sh
+npm install react-day-picker lucide-react
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="carousel" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="carousel-style-default" />
+
+<br />
+<br />
+
+### Sizes
+
+<ComponentShowcase name="carousel-style-sizes" />
+
+<br />
+<br />
+
+### Vertical
+
+<ComponentShowcase name="carousel-style-vertical" />
+
diff --git a/package.json b/package.json
index 37da75a..8098bf2 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "cmdk": "^1.1.1",
     "contentlayer": "^0.3.4",
     "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
     "lucide-react": "^0.445.0",
     "mdast-util-toc": "^7.1.0",
     "next": "14.2.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f52c10e..173d0a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -86,6 +86,9 @@ importers:
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
+      embla-carousel-react:
+        specifier: ^8.6.0
+        version: 8.6.0(react@18.0.0)
       lucide-react:
         specifier: ^0.445.0
         version: 0.445.0(react@18.0.0)
@@ -2815,6 +2818,19 @@ packages:
   electron-to-chromium@1.5.112:
     resolution: {integrity: sha512-oen93kVyqSb3l+ziUgzIOlWt/oOuy4zRmpwestMn4rhFWAoFJeFuCVte9F2fASjeZZo7l/Cif9TiyrdW4CwEMA==}
 
+  embla-carousel-react@8.6.0:
+    resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
+  embla-carousel-reactive-utils@8.6.0:
+    resolution: {integrity: sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0:
+    resolution: {integrity: sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -4094,6 +4110,7 @@ packages:
 
   oniguruma-to-js@0.4.3:
     resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}
+    deprecated: use oniguruma-to-es instead
 
   oo-ascii-tree@1.104.0:
     resolution: {integrity: sha512-2cScXtwxt5WVIi3+vdkbKoHSeRepRcibnFhdV2ojGxVvj1KU0m0EHfBCsal6XEg1vBkMgTIxnxVd+E/l/Fam3w==}
@@ -7625,6 +7642,18 @@ snapshots:
 
   electron-to-chromium@1.5.112: {}
 
+  embla-carousel-react@8.6.0(react@18.0.0):
+    dependencies:
+      embla-carousel: 8.6.0
+      embla-carousel-reactive-utils: 8.6.0(embla-carousel@8.6.0)
+      react: 18.0.0
+
+  embla-carousel-reactive-utils@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
+  embla-carousel@8.6.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}
diff --git a/preview/components/carousel-style-default.tsx b/preview/components/carousel-style-default.tsx
new file mode 100644
index 0000000..be1cda2
--- /dev/null
+++ b/preview/components/carousel-style-default.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { Card } from "@/components/retroui/Card"
+import {
+    Carousel,
+} from "@/components/retroui/Carousel"
+
+export default function CarouselStyleDefault() {
+    return (
+        <Carousel className="w-full max-w-xs">
+            <Carousel.Content>
+                {Array.from({ length: 5 }).map((_, index) => (
+                    <Carousel.Item key={index}>
+                        <div className="p-4">
+                            <Card className="w-full">
+                                <Card.Content className="flex aspect-square items-center justify-center p-6">
+                                    <span className="text-4xl font-semibold">{index + 1}</span>
+                                </Card.Content>
+                            </Card>
+                        </div>
+                    </Carousel.Item>
+                ))}
+            </Carousel.Content>
+            <Carousel.Previous />
+            <Carousel.Next />
+        </Carousel>
+    )
+}
diff --git a/preview/components/carousel-style-sizes.tsx b/preview/components/carousel-style-sizes.tsx
new file mode 100644
index 0000000..1b36c59
--- /dev/null
+++ b/preview/components/carousel-style-sizes.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { Card } from "@/components/retroui/Card"
+import {
+    Carousel,
+} from "@/components/retroui/Carousel"
+
+export default function CarouselStyleSizes() {
+    return (
+        <Carousel className="w-full max-w-sm">
+            <Carousel.Content>
+                {Array.from({ length: 5 }).map((_, index) => (
+                    <Carousel.Item key={index} className="md:basis-1/2 lg:basis-1/3">
+                        <div className="p-1">
+                            <Card className="w-full">
+                                <Card.Content className="flex aspect-square items-center justify-center p-6">
+                                    <span className="text-4xl font-semibold">{index + 1}</span>
+                                </Card.Content>
+                            </Card>
+                        </div>
+                    </Carousel.Item>
+                ))}
+            </Carousel.Content>
+            <Carousel.Previous />
+            <Carousel.Next />
+        </Carousel>
+    )
+}
diff --git a/preview/components/carousel-style-vertical.tsx b/preview/components/carousel-style-vertical.tsx
new file mode 100644
index 0000000..473b56c
--- /dev/null
+++ b/preview/components/carousel-style-vertical.tsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+
+import { Card } from "@/components/retroui/Card"
+import {
+    Carousel,
+} from "@/components/retroui/Carousel"
+
+const cards = [
+    {label: "1", color: "purple-300"},
+    {label: "2", color: "green-300"},
+    {label: "3", color: "red-300"},
+    {label: "4", color: "yellow-300"},
+    {label: "5", color: "blue-300"},
+]
+export default function CarouselStyleVertical() {
+    return (
+        <Carousel opts={{
+            align: "start",
+        }} className="w-full max-w-xs" orientation="vertical">
+            <Carousel.Content className="h-[300px]">
+                {cards.map((card, index) => (
+                    <Carousel.Item key={index} className="md:basis-1/2">
+                        <div className="p-1">
+                            <Card className={`w-full h-[200px] bg-${card.color} rounded-lg`}>
+                                <Card.Content className="flex h-full w-full items-center justify-center p-6">
+                                    <span className="text-4xl font-semibold">{card.label}</span>
+                                </Card.Content>
+                            </Card>
+                        </div>
+                    </Carousel.Item>
+                ))}
+            </Carousel.Content>
+            <Carousel.Previous className="rounded-full shadow-sm" />
+            <Carousel.Next className="rounded-full shadow-sm" />
+        </Carousel>
+    )
+}
diff --git a/public/r/carousel.json b/public/r/carousel.json
new file mode 100644
index 0000000..2f0afa1
--- /dev/null
+++ b/public/r/carousel.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "carousel",
+  "type": "registry:component",
+  "title": "Carousel",
+  "description": "A customizable carousel component to show animated cards",
+  "dependencies": [
+    "embla-carousel-react",
+    "lucide-react"
+  ],
+  "files": [
+    {
+      "path": "components/retroui/Carousel.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n    type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/retroui/Button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n    opts?: CarouselOptions\n    plugins?: CarouselPlugin\n    orientation?: \"horizontal\" | \"vertical\"\n    setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n    carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n    api: ReturnType<typeof useEmblaCarousel>[1]\n    scrollPrev: () => void\n    scrollNext: () => void\n    canScrollPrev: boolean\n    canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n    const context = React.useContext(CarouselContext)\n\n    if (!context) {\n        throw new Error(\"useCarousel must be used within a <Carousel />\")\n    }\n\n    return context\n}\n\nfunction Carousel({\n    orientation = \"horizontal\",\n    opts,\n    setApi,\n    plugins,\n    className,\n    children,\n    ...props\n}: React.ComponentProps<\"div\"> & CarouselProps) {\n    const [carouselRef, api] = useEmblaCarousel(\n        {\n            ...opts,\n            axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n        },\n        plugins\n    )\n    const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n    const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n    const onSelect = React.useCallback((api: CarouselApi) => {\n        if (!api) return\n        setCanScrollPrev(api.canScrollPrev())\n        setCanScrollNext(api.canScrollNext())\n    }, [])\n\n    const scrollPrev = React.useCallback(() => {\n        api?.scrollPrev()\n    }, [api])\n\n    const scrollNext = React.useCallback(() => {\n        api?.scrollNext()\n    }, [api])\n\n    const handleKeyDown = React.useCallback(\n        (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                event.preventDefault()\n                scrollPrev()\n            } else if (event.key === \"ArrowRight\") {\n                event.preventDefault()\n                scrollNext()\n            }\n        },\n        [scrollPrev, scrollNext]\n    )\n\n    React.useEffect(() => {\n        if (!api || !setApi) return\n        setApi(api)\n    }, [api, setApi])\n\n    React.useEffect(() => {\n        if (!api) return\n        onSelect(api)\n        api.on(\"reInit\", onSelect)\n        api.on(\"select\", onSelect)\n\n        return () => {\n            api?.off(\"select\", onSelect)\n        }\n    }, [api, onSelect])\n\n    return (\n        <CarouselContext.Provider\n            value={{\n                carouselRef,\n                api: api,\n                opts,\n                orientation:\n                    orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n                scrollPrev,\n                scrollNext,\n                canScrollPrev,\n                canScrollNext,\n            }}\n        >\n            <div\n                onKeyDownCapture={handleKeyDown}\n                className={cn(\"relative\", className)}\n                role=\"region\"\n                aria-roledescription=\"carousel\"\n                data-slot=\"carousel\"\n                {...props}\n            >\n                {children}\n            </div>\n        </CarouselContext.Provider>\n    )\n}\n\nfunction CarouselContent({ className, ...props }: React.ComponentProps<\"div\">) {\n    const { carouselRef, orientation } = useCarousel()\n\n    return (\n        <div\n            ref={carouselRef}\n            className=\"overflow-hidden\"\n            data-slot=\"carousel-content\"\n        >\n            <div\n                className={cn(\n                    \"flex\",\n                    orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n                    className\n                )}\n                {...props}\n            />\n        </div>\n    )\n}\n\nfunction CarouselItem({ className, ...props }: React.ComponentProps<\"div\">) {\n    const { orientation } = useCarousel()\n\n    return (\n        <div\n            role=\"group\"\n            aria-roledescription=\"slide\"\n            data-slot=\"carousel-item\"\n            className={cn(\n                \"min-w-0 shrink-0 grow-0 basis-full\",\n                orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n                className\n            )}\n            {...props}\n        />\n    )\n}\n\nfunction CarouselPrevious({\n    className,\n    variant = \"outline\",\n    size = \"icon\",\n    ...props\n}: React.ComponentProps<typeof Button>) {\n    const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n    return (\n        <Button\n            data-slot=\"carousel-previous\"\n            variant={variant}\n            size={size}\n            className={cn(\n                \"absolute size-8 rounded\",\n                orientation === \"horizontal\"\n                    ? \"top-1/2 -left-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]\"\n                    : \"-top-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]\",\n                className\n            )}\n            disabled={!canScrollPrev}\n            onClick={scrollPrev}\n            {...props}\n        >\n            <ArrowLeft />\n            <span className=\"sr-only\">Previous slide</span>\n        </Button>\n    )\n}\n\nfunction CarouselNext({\n    className,\n    variant = \"outline\",\n    size = \"icon\",\n    ...props\n}: React.ComponentProps<typeof Button>) {\n    const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n    return (\n        <Button\n            data-slot=\"carousel-next\"\n            variant={variant}\n            size={size}\n            className={cn(\n                \"absolute size-8 rounded\",\n                orientation === \"horizontal\"\n                    ? \"top-1/2 -right-12 -translate-y-1/2 hover:-translate-y-[calc(50%-2px)] active:-translate-y-[calc(50%-4px)]\"\n                    : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90 hover:-translate-x-[calc(50%-2px)] active:-translate-x-[calc(50%-4px)]\",\n                className\n            )}\n            disabled={!canScrollNext}\n            onClick={scrollNext}\n            {...props}\n        >\n            <ArrowRight />\n            <span className=\"sr-only\">Next slide</span>\n        </Button>\n    )\n}\n\nconst CarouselObject = Object.assign(Carousel, {\n    Content: CarouselContent,\n    Item: CarouselItem,\n    Previous: CarouselPrevious,\n    Next: CarouselNext,\n})\n\nexport { CarouselObject as Carousel }",
+      "type": "registry:component",
+      "target": "components/retroui/Carousel.tsx"
+    },
+    {
+      "path": "components/retroui/Button.tsx",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nexport const buttonVariants = cva(\n  \"font-head transition-all rounded outline-hidden cursor-pointer duration-200 font-medium flex items-center\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"shadow-md hover:shadow active:shadow-none bg-primary text-primary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-primary-hover\",\n        secondary:\n          \"shadow-md hover:shadow active:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-black transition hover:translate-y-1 active:translate-y-2 active:translate-x-1 hover:bg-secondary-hover\",\n        outline:\n          \"shadow-md hover:shadow active:shadow-none bg-transparent border-2 transition hover:translate-y-1 active:translate-y-2 active:translate-x-1\",\n        link: \"bg-transparent hover:underline\",\n        ghost: \"bg-transparent hover:bg-accent\"\n      },\n      size: {\n        sm: \"px-3 py-1 text-sm shadow hover:shadow-none\",\n        md: \"px-4 py-1.5 text-base\",\n        lg: \"px-6 lg:px-8 py-2 lg:py-3 text-md lg:text-lg\",\n        icon: \"p-2\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      asChild = false,\n      ...props\n    }: IButtonProps,\n    forwardedRef,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={forwardedRef}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = \"Button\";",
+      "type": "registry:component",
+      "target": "components/retroui/Button.tsx"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/registry.json b/registry.json
index ee24924..80b107f 100644
--- a/registry.json
+++ b/registry.json
@@ -2,7 +2,10 @@
   "$schema": "https://ui.shadcn.com/schema/registry.json",
   "name": "RetroUI",
   "homepage": "https://retroui.dev",
-  "dependencies": ["tailwind-merge", "clsx"],
+  "dependencies": [
+    "tailwind-merge",
+    "clsx"
+  ],
   "items": [
     {
       "$schema": "https://ui.shadcn.com/schema/registry-item.json",
@@ -55,7 +58,10 @@
       "name": "utils",
       "type": "registry:lib",
       "title": "Utils",
-      "dependencies": ["clsx", "tailwind-merge"],
+      "dependencies": [
+        "clsx",
+        "tailwind-merge"
+      ],
       "files": [
         {
           "path": "lib/utils.ts",
@@ -68,7 +74,10 @@
       "type": "registry:component",
       "title": "Accordion",
       "description": "This collapsible component let's your users read only the content they care about. 😌",
-      "dependencies": ["@radix-ui/react-accordion", "lucide-react"],
+      "dependencies": [
+        "@radix-ui/react-accordion",
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "components/retroui/Accordion.tsx",
@@ -82,7 +91,9 @@
       "type": "registry:component",
       "title": "Alert",
       "description": "Notify your users about important events and updates. 📣",
-      "dependencies": ["class-variance-authority"],
+      "dependencies": [
+        "class-variance-authority"
+      ],
       "files": [
         {
           "path": "components/retroui/Alert.tsx",
@@ -96,7 +107,9 @@
       "type": "registry:component",
       "title": "Avatar",
       "description": "Default rounded avatar that can show your users profile picture. ✨",
-      "dependencies": ["@radix-ui/react-avatar"],
+      "dependencies": [
+        "@radix-ui/react-avatar"
+      ],
       "files": [
         {
           "path": "components/retroui/Avatar.tsx",
@@ -110,7 +123,9 @@
       "type": "registry:component",
       "title": "Badge",
       "description": "The component that looks like a button but isn't clickable!",
-      "dependencies": ["class-variance-authority"],
+      "dependencies": [
+        "class-variance-authority"
+      ],
       "files": [
         {
           "path": "components/retroui/Badge.tsx",
@@ -124,7 +139,10 @@
       "type": "registry:component",
       "title": "Retro Button",
       "description": "This bold button makes sure your users click on it and perform the actions you want!",
-      "dependencies": ["class-variance-authority", "@radix-ui/react-slot"],
+      "dependencies": [
+        "class-variance-authority",
+        "@radix-ui/react-slot"
+      ],
       "files": [
         {
           "path": "components/retroui/Button.tsx",
@@ -151,12 +169,15 @@
         }
       ]
     },
-        {
+    {
       "name": "calendar",
       "type": "registry:component",
       "title": "Calendar",
       "description": "A customizable calendar component for showing dates. 📝",
-      "dependencies": ["react-day-picker", "lucide-react"],
+      "dependencies": [
+        "react-day-picker",
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "components/retroui/Calendar.tsx",
@@ -170,6 +191,28 @@
         }
       ]
     },
+    {
+      "name": "carousel",
+      "type": "registry:component",
+      "title": "Carousel",
+      "description": "A customizable carousel component to show animated cards",
+      "dependencies": [
+        "embla-carousel-react",
+        "lucide-react"
+      ],
+      "files": [
+        {
+          "path": "components/retroui/Carousel.tsx",
+          "target": "components/retroui/Carousel.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "components/retroui/Button.tsx",
+          "target": "components/retroui/Button.tsx",
+          "type": "registry:component"
+        }
+      ]
+    },
     {
       "name": "checkbox",
       "type": "registry:component",
@@ -212,7 +255,11 @@
       "type": "registry:component",
       "title": "Command",
       "description": "Fast, keyboard-first command palette powered by cmdk.",
-      "dependencies": ["cmdk", "@radix-ui/react-dialog", "lucide-react"],
+      "dependencies": [
+        "cmdk",
+        "@radix-ui/react-dialog",
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "components/retroui/Command.tsx",
@@ -239,7 +286,10 @@
       "type": "registry:component",
       "title": "Label",
       "description": "Label for form fields",
-      "dependencies": ["@radix-ui/react-label", "class-variance-authority"],
+      "dependencies": [
+        "@radix-ui/react-label",
+        "class-variance-authority"
+      ],
       "files": [
         {
           "path": "components/retroui/Label.tsx",
@@ -253,7 +303,9 @@
       "type": "registry:component",
       "title": "Loader",
       "description": "A loading indicator",
-      "dependencies": ["class-variance-authority"],
+      "dependencies": [
+        "class-variance-authority"
+      ],
       "files": [
         {
           "path": "components/retroui/Loader.tsx",
@@ -267,7 +319,9 @@
       "type": "registry:component",
       "title": "Menu",
       "description": "Show your users a list of actions they can take. 📋",
-      "dependencies": ["@radix-ui/react-dropdown-menu"],
+      "dependencies": [
+        "@radix-ui/react-dropdown-menu"
+      ],
       "files": [
         {
           "path": "components/retroui/Menu.tsx",
@@ -281,7 +335,10 @@
       "type": "registry:component",
       "title": "Context Menu",
       "description": "Show contextual actions on right-click.",
-      "dependencies": ["@radix-ui/react-context-menu", "lucide-react"],
+      "dependencies": [
+        "@radix-ui/react-context-menu",
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "components/retroui/ContextMenu.tsx",
@@ -295,7 +352,10 @@
       "type": "registry:component",
       "title": "Popover",
       "description": "A handy small component for your little input needs...😉",
-      "dependencies": ["@radix-ui/react-popover", "class-variance-authority"],
+      "dependencies": [
+        "@radix-ui/react-popover",
+        "class-variance-authority"
+      ],
       "author": "Ankan Bhattacharya <https://github.com/ankan002>",
       "files": [
         {
@@ -310,7 +370,9 @@
       "type": "registry:component",
       "title": "Progress",
       "description": "Show progress...",
-      "dependencies": ["@radix-ui/react-progress"],
+      "dependencies": [
+        "@radix-ui/react-progress"
+      ],
       "files": [
         {
           "path": "components/retroui/Progress.tsx",
@@ -341,7 +403,10 @@
       "type": "registry:component",
       "title": "Select",
       "description": "Let your users pick what they want.",
-      "dependencies": ["@radix-ui/react-select", "lucide-react"],
+      "dependencies": [
+        "@radix-ui/react-select",
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "components/retroui/Select.tsx",
@@ -355,7 +420,10 @@
       "type": "registry:component",
       "title": "Slider",
       "description": "Let your users pick what they want.",
-      "dependencies": ["@radix-ui/react-slider", "lucide-react"],
+      "dependencies": [
+        "@radix-ui/react-slider",
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "components/retroui/Slider.tsx",
@@ -369,7 +437,11 @@
       "type": "registry:component",
       "title": "Sonner",
       "description": "A beautiful toast component that can grab audience attention from any place.",
-      "dependencies": ["sonner", "lucide-react", "class-variance-authority"],
+      "dependencies": [
+        "sonner",
+        "lucide-react",
+        "class-variance-authority"
+      ],
       "files": [
         {
           "path": "components/retroui/Sonner.tsx",
@@ -383,7 +455,9 @@
       "type": "registry:component",
       "title": "Switch",
       "description": "Let users to turn on or off your marketing emails or notifications.",
-      "dependencies": ["@radix-ui/react-switch"],
+      "dependencies": [
+        "@radix-ui/react-switch"
+      ],
       "files": [
         {
           "path": "components/retroui/Switch.tsx",
@@ -397,7 +471,9 @@
       "type": "registry:component",
       "title": "Tab",
       "description": "Switch between different views using tabs.",
-      "dependencies": ["@headlessui/react"],
+      "dependencies": [
+        "@headlessui/react"
+      ],
       "files": [
         {
           "path": "components/retroui/Tab.tsx",
@@ -424,7 +500,9 @@
       "type": "registry:component",
       "title": "text",
       "description": "Show your texts in different styles. 💅",
-      "dependencies": ["class-variance-authority"],
+      "dependencies": [
+        "class-variance-authority"
+      ],
       "files": [
         {
           "path": "components/retroui/Text.tsx",
@@ -451,7 +529,10 @@
       "type": "registry:component",
       "title": "Toggle",
       "description": "This crazy toggling button keeps people toggling...😃",
-      "dependencies": ["@radix-ui/react-toggle", "class-variance-authority"],
+      "dependencies": [
+        "@radix-ui/react-toggle",
+        "class-variance-authority"
+      ],
       "author": "Ankan Bhattacharya <https://github.com/ankan002>",
       "files": [
         {
@@ -490,7 +571,10 @@
       "type": "registry:component",
       "title": "Tooltip",
       "description": "A cool way to give your users a hint of what a component does...😉",
-      "dependencies": ["@radix-ui/react-tooltip", "class-variance-authority"],
+      "dependencies": [
+        "@radix-ui/react-tooltip",
+        "class-variance-authority"
+      ],
       "author": "Ankan Bhattacharya <https://github.com/ankan002>",
       "files": [
         {
@@ -505,7 +589,9 @@
       "type": "registry:component",
       "title": "Area Chart",
       "description": "Beautiful area chart for data visualization with retro styling",
-      "dependencies": ["recharts"],
+      "dependencies": [
+        "recharts"
+      ],
       "files": [
         {
           "path": "components/retroui/charts/AreaChart.tsx",
@@ -519,7 +605,9 @@
       "type": "registry:component",
       "title": "Bar Chart",
       "description": "Beautiful bar chart for data visualization with retro styling",
-      "dependencies": ["recharts"],
+      "dependencies": [
+        "recharts"
+      ],
       "files": [
         {
           "path": "components/retroui/charts/BarChart.tsx",
@@ -533,7 +621,9 @@
       "type": "registry:component",
       "title": "Line Chart",
       "description": "Beautiful line chart for data visualization with retro styling",
-      "dependencies": ["recharts"],
+      "dependencies": [
+        "recharts"
+      ],
       "files": [
         {
           "path": "components/retroui/charts/LineChart.tsx",
@@ -547,7 +637,9 @@
       "type": "registry:component",
       "title": "Pie Chart",
       "description": "Beautiful pie chart for data visualization with retro styling",
-      "dependencies": ["recharts"],
+      "dependencies": [
+        "recharts"
+      ],
       "files": [
         {
           "path": "components/retroui/charts/PieChart.tsx",
@@ -560,7 +652,9 @@
       "name": "accordion-style-default",
       "title": "accordion-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/accordion.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/accordion.json"
+      ],
       "files": [
         {
           "path": "preview/components/accordion-style-default.tsx",
@@ -573,7 +667,9 @@
       "name": "alert-style-default",
       "title": "alert-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/alert.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/alert.json"
+      ],
       "files": [
         {
           "path": "preview/components/alert-style-default.tsx",
@@ -586,7 +682,9 @@
       "name": "alert-style-solid",
       "title": "alert-style-solid",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/alert.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/alert.json"
+      ],
       "files": [
         {
           "path": "preview/components/alert-style-solid.tsx",
@@ -599,7 +697,9 @@
       "name": "alert-style-with-icon",
       "title": "alert-style-with-icon",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/alert.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/alert.json"
+      ],
       "files": [
         {
           "path": "preview/components/alert-style-with-icon.tsx",
@@ -612,7 +712,9 @@
       "name": "alert-style-all-status",
       "title": "alert-style-all-status",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/alert.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/alert.json"
+      ],
       "files": [
         {
           "path": "preview/components/alert-style-all-status.tsx",
@@ -625,7 +727,9 @@
       "name": "avatar-style-circle",
       "title": "avatar-style-circle",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/avatar.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/avatar.json"
+      ],
       "files": [
         {
           "path": "preview/components/avatar-style-circle.tsx",
@@ -638,7 +742,9 @@
       "name": "avatar-style-fallbacks",
       "title": "avatar-style-fallbacks",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/avatar.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/avatar.json"
+      ],
       "files": [
         {
           "path": "preview/components/avatar-style-circle-fallbacks.tsx",
@@ -651,7 +757,9 @@
       "name": "avatar-style-circle-sizes",
       "title": "avatar-style-circle-sizes",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/avatar.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/avatar.json"
+      ],
       "files": [
         {
           "path": "preview/components/avatar-style-circle-sizes.tsx",
@@ -664,7 +772,9 @@
       "name": "badge-style-default",
       "title": "badge-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/badge.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/badge.json"
+      ],
       "files": [
         {
           "path": "preview/components/badge-style-default.tsx",
@@ -677,7 +787,9 @@
       "name": "badge-style-variants",
       "title": "badge-style-variants",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/badge.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/badge.json"
+      ],
       "files": [
         {
           "path": "preview/components/badge-style-variants.tsx",
@@ -690,7 +802,9 @@
       "name": "badge-style-default",
       "title": "badge-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/badge.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/badge.json"
+      ],
       "files": [
         {
           "path": "preview/components/badge-style-rounded.tsx",
@@ -703,7 +817,9 @@
       "name": "badge-style-sizes",
       "title": "badge-style-sizes",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/badge.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/badge.json"
+      ],
       "files": [
         {
           "path": "preview/components/badge-style-sizes.tsx",
@@ -716,7 +832,9 @@
       "name": "button-style-default",
       "title": "button-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/button.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/button.json"
+      ],
       "files": [
         {
           "path": "preview/components/button-style-default.tsx",
@@ -744,7 +862,9 @@
       "name": "button-style-secondary",
       "title": "button-style-secondary",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/button.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/button.json"
+      ],
       "files": [
         {
           "path": "preview/components/button-style-secondary.tsx",
@@ -757,7 +877,9 @@
       "name": "button-style-outline",
       "title": "button-style-outline",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/button.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/button.json"
+      ],
       "files": [
         {
           "path": "preview/components/button-style-outline.tsx",
@@ -770,7 +892,9 @@
       "name": "button-style-link",
       "title": "button-style-link",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/button.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/button.json"
+      ],
       "files": [
         {
           "path": "preview/components/button-style-link.tsx",
@@ -783,7 +907,9 @@
       "name": "button-style-with-icon",
       "title": "button-style-with-icon",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/button.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/button.json"
+      ],
       "files": [
         {
           "path": "preview/components/button-style-with-icon.tsx",
@@ -796,7 +922,9 @@
       "name": "card-style-default",
       "title": "card-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/card.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/card.json"
+      ],
       "files": [
         {
           "path": "preview/components/card-style-default.tsx",
@@ -809,7 +937,9 @@
       "name": "card-style-commerce",
       "title": "card-style-commerce",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/card.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/card.json"
+      ],
       "files": [
         {
           "path": "preview/components/card-style-commerce.tsx",
@@ -822,7 +952,9 @@
       "name": "card-style-testimonial",
       "title": "card-style-testimonial",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/card.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/card.json"
+      ],
       "files": [
         {
           "path": "preview/components/card-style-testimonial.tsx",
@@ -835,7 +967,9 @@
       "name": "checkbox-style-default",
       "title": "checkbox-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/checkbox.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/checkbox.json"
+      ],
       "files": [
         {
           "path": "preview/components/checkbox-style-default.tsx",
@@ -848,7 +982,9 @@
       "name": "checkbox-style-toggle",
       "title": "checkbox-style-toggle",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/checkbox.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/checkbox.json"
+      ],
       "files": [
         {
           "path": "preview/components/checkbox-style-variants.tsx",
@@ -861,7 +997,9 @@
       "name": "checkbox-style-default",
       "title": "checkbox-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/checkbox.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/checkbox.json"
+      ],
       "files": [
         {
           "path": "preview/components/checkbox-style-sizes.tsx",
@@ -874,7 +1012,9 @@
       "name": "input-style-default",
       "title": "input-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/input.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/input.json"
+      ],
       "files": [
         {
           "path": "preview/components/input-style-default.tsx",
@@ -887,7 +1027,9 @@
       "name": "input-style-with-label",
       "title": "input-style-with-label",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/input.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/input.json"
+      ],
       "files": [
         {
           "path": "preview/components/input-style-with-label.tsx",
@@ -900,7 +1042,9 @@
       "name": "input-style-error",
       "title": "input-style-error",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/input.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/input.json"
+      ],
       "files": [
         {
           "path": "preview/components/input-style-error.tsx",
@@ -913,7 +1057,9 @@
       "name": "menu-style-default",
       "title": "menu-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/menu.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/menu.json"
+      ],
       "files": [
         {
           "path": "preview/components/menu-style-default.tsx",
@@ -926,7 +1072,9 @@
       "name": "progress-style-default",
       "title": "progress-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/progress.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/progress.json"
+      ],
       "files": [
         {
           "path": "preview/components/progress-style-default.tsx",
@@ -939,7 +1087,9 @@
       "name": "radio-style-default",
       "title": "radio-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/radio.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/radio.json"
+      ],
       "files": [
         {
           "path": "preview/components/radio-style-default.tsx",
@@ -952,7 +1102,9 @@
       "name": "radio-style-variants",
       "title": "radio-style-variants",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/radio.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/radio.json"
+      ],
       "files": [
         {
           "path": "preview/components/radio-style-variants.tsx",
@@ -965,7 +1117,9 @@
       "name": "radio-style-sizes",
       "title": "radio-style-sizes",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/radio.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/radio.json"
+      ],
       "files": [
         {
           "path": "preview/components/radio-style-sizes.tsx",
@@ -978,7 +1132,9 @@
       "name": "select-style-default",
       "title": "select-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/select.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/select.json"
+      ],
       "files": [
         {
           "path": "preview/components/select-style-default.tsx",
@@ -991,7 +1147,9 @@
       "name": "switch-style-default",
       "title": "switch-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/switch.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/switch.json"
+      ],
       "files": [
         {
           "path": "preview/components/switch-style-default.tsx",
@@ -1004,7 +1162,9 @@
       "name": "switch-style-disabled",
       "title": "switch-style-disabled",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/switch.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/switch.json"
+      ],
       "files": [
         {
           "path": "preview/components/switch-style-disabled.tsx",
@@ -1017,7 +1177,9 @@
       "name": "table-style-default",
       "title": "table-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/table.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/table.json"
+      ],
       "files": [
         {
           "path": "preview/components/table-style-default.tsx",
@@ -1030,7 +1192,9 @@
       "name": "table-with-checkbox",
       "title": "table-with-checkbox",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/table.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/table.json"
+      ],
       "files": [
         {
           "path": "preview/components/table-with-checkbox.tsx",
@@ -1043,7 +1207,9 @@
       "name": "table-with-sticky-header",
       "title": "table-with-sticky-header",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/table.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/table.json"
+      ],
       "files": [
         {
           "path": "preview/components/table-with-sticky-header.tsx",
@@ -1056,7 +1222,9 @@
       "name": "textarea-style-default",
       "title": "textarea-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/textarea.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/textarea.json"
+      ],
       "files": [
         {
           "path": "preview/components/textarea-style-default.tsx",
@@ -1069,7 +1237,9 @@
       "name": "text-headings",
       "title": "text-headings",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/text.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/text.json"
+      ],
       "files": [
         {
           "path": "preview/components/text-headings.tsx",
@@ -1082,7 +1252,9 @@
       "name": "typography-p",
       "title": "typography-p",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/text.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/text.json"
+      ],
       "files": [
         {
           "path": "preview/components/typography-p.tsx",
@@ -1095,7 +1267,9 @@
       "name": "tab-style-default",
       "title": "tab-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/tab.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/tab.json"
+      ],
       "files": [
         {
           "path": "preview/components/tab-style-default.tsx",
@@ -1108,7 +1282,9 @@
       "name": "dialog-style-default",
       "title": "dialog-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/dialog.json"
+      ],
       "files": [
         {
           "path": "preview/components/dialog-style-default.tsx",
@@ -1121,7 +1297,9 @@
       "name": "dialog-style-with-footer",
       "title": "dialog-style-with-footer",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/dialog.json"
+      ],
       "files": [
         {
           "path": "preview/components/dialog-style-with-footer.tsx",
@@ -1134,7 +1312,9 @@
       "name": "dialog-style-width-variant",
       "title": "dialog-style-width-variant",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/dialog.json"
+      ],
       "files": [
         {
           "path": "preview/components/dialog-style-width-variant.tsx",
@@ -1147,7 +1327,9 @@
       "name": "dialog-style-with-form",
       "title": "dialog-style-with-form",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/dialog.json"],
+      "registryDependencies": [
+        "https://retroui.dev/r/dialog.json"
+      ],
       "files": [
         {
           "path": "preview/components/dialog-style-with-form.tsx",
@@ -1160,8 +1342,12 @@
       "name": "toggle-style-default",
       "title": "toggle-style-default",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
-      "dependencies": ["lucide-react"],
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-style-default.tsx",
@@ -1174,8 +1360,12 @@
       "name": "toggle-style-outline-muted",
       "title": "toggle-style-outline-muted",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
-      "dependencies": ["lucide-react"],
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-style-outline-muted.tsx",
@@ -1188,8 +1378,12 @@
       "name": "toggle-style-outlined",
       "title": "toggle-style-outlined",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
-      "dependencies": ["lucide-react"],
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-style-outlined.tsx",
@@ -1202,8 +1396,12 @@
       "name": "toggle-style-solid",
       "title": "toggle-style-solid",
       "type": "registry:block",
-      "registryDependencies": ["https://retroui.dev/r/toggle.json"],
-      "dependencies": ["lucide-react"],
+      "registryDependencies": [
+        "https://retroui.dev/r/toggle.json"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-style-solid.tsx",
@@ -1220,7 +1418,9 @@
         "https://retroui.dev/r/toggle.json",
         "https://retroui.dev/r/toggle-group.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-group-style-default.tsx",
@@ -1237,7 +1437,9 @@
         "https://retroui.dev/r/toggle.json",
         "https://retroui.dev/r/toggle-group.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-group-style-outline-muted.tsx",
@@ -1254,7 +1456,9 @@
         "https://retroui.dev/r/toggle.json",
         "https://retroui.dev/r/toggle-group.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-group-style-outlined.tsx",
@@ -1271,7 +1475,9 @@
         "https://retroui.dev/r/toggle.json",
         "https://retroui.dev/r/toggle-group.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/toggle-group-style-solid.tsx",
@@ -1288,7 +1494,9 @@
         "https://retroui.dev/r/tooltip.json",
         "https://retroui.dev/r/button.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/tooltip-style-default.tsx",
@@ -1305,7 +1513,9 @@
         "https://retroui.dev/r/tooltip.json",
         "https://retroui.dev/r/button.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/tooltip-style-primary.tsx",
@@ -1322,7 +1532,9 @@
         "https://retroui.dev/r/tooltip.json",
         "https://retroui.dev/r/button.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/tooltip-style-solid.tsx",
@@ -1339,7 +1551,9 @@
         "https://retroui.dev/r/sonner.json",
         "https://retroui.dev/r/button.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/sonner-style-default.tsx",
@@ -1356,7 +1570,9 @@
         "https://retroui.dev/r/sonner.json",
         "https://retroui.dev/r/button.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/sonner-style-error.tsx",
@@ -1375,7 +1591,9 @@
         "https://retroui.dev/r/input.json",
         "https://retroui.dev/r/button.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/popover-style-default.tsx",
@@ -1394,7 +1612,9 @@
         "https://retroui.dev/r/input.json",
         "https://retroui.dev/r/button.json"
       ],
-      "dependencies": ["lucide-react"],
+      "dependencies": [
+        "lucide-react"
+      ],
       "files": [
         {
           "path": "preview/components/popover-style-default-shadow.tsx",
@@ -1404,4 +1624,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file