CarouselPrevious() — ui Function Reference

Architecture documentation for the CarouselPrevious() function in carousel.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry calls 1

Entity Profile

ComponentRegistry→ ChartRegistry→ CarouselPrevious() — ui Function Reference

Dependency Diagram

graph TD
  32e303e1_9857_3f5d_59a0_80968c6f6501["CarouselPrevious()"]
  8bc8380a_deff_8ce1_5278_60cc3b26d9d7["carousel.tsx"]
  32e303e1_9857_3f5d_59a0_80968c6f6501 -->|defined in| 8bc8380a_deff_8ce1_5278_60cc3b26d9d7
  89d66177_a2c8_f480_9a6a_b1da0d7adbbe["useCarousel()"]
  32e303e1_9857_3f5d_59a0_80968c6f6501 -->|calls| 89d66177_a2c8_f480_9a6a_b1da0d7adbbe
  style 32e303e1_9857_3f5d_59a0_80968c6f6501 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/carousel.tsx lines 174–209

function CarouselPrevious({
  className,
  variant = "outline",
  size = "icon-sm",
  ...props
}: React.ComponentProps<typeof Button>) {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

  return (
    <Button
      data-slot="carousel-previous"
      variant={variant}
      size={size}
      className={cn(
        "cn-carousel-previous absolute touch-manipulation",
        orientation === "horizontal"
          ? "top-1/2 -left-12 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <IconPlaceholder
        lucide="ChevronLeftIcon"
        tabler="IconChevronLeft"
        hugeicons="ArrowLeft01Icon"
        phosphor="CaretLeftIcon"
        remixicon="RiArrowLeftSLine"
        className="cn-rtl-flip"
      />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
}