CarouselNext() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry calls 1

Entity Profile

ComponentRegistry→ ChartRegistry→ CarouselNext() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/ui/carousel.tsx lines 211–246

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

  return (
    <Button
      data-slot="carousel-next"
      variant={variant}
      size={size}
      className={cn(
        "cn-carousel-next absolute touch-manipulation",
        orientation === "horizontal"
          ? "top-1/2 -right-12 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <IconPlaceholder
        lucide="ChevronRightIcon"
        tabler="IconChevronRight"
        hugeicons="ArrowRight01Icon"
        phosphor="CaretRightIcon"
        remixicon="RiArrowRightSLine"
        className="cn-rtl-flip"
      />
      <span className="sr-only">Next slide</span>
    </Button>
  )
}