Carousel

1import { Carousel, CarouselControl, CarouselPrevious, CarouselNext } from "@/components/ui/carousel";
2
3<Carousel />

1"use client";
2
3import {
4  Carousel as ArkCarousel,
5  useCarouselContext,
6} from "@ark-ui/react/carousel";
7import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
8import type React from "react";
9import { cn } from "@/lib/utils";
10import { Button } from "@/registry/react/components/button";
11
12export const useCarousel = useCarouselContext;
13
14export const Carousel = (
15  props: React.ComponentProps<typeof ArkCarousel.Root>
16) => {
17  const { spacing = "16px", className, ...rest } = props;
18
19  return (
20    <ArkCarousel.Root
21      className={cn(
22        "relative",
23        "flex flex-col",
24        "data-[orientation=vertical]:w-max data-[orientation=vertical]:flex-row",
25        className
26      )}
27      data-slot="carousel"
28      spacing={spacing}