Carousel: HextaUI y shadcn/ui

El Carousel de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

Medida	HextaUI	shadcn/ui
Partes exportadas	10	5
Props que gestiona el envoltorio	23	8
Líneas de código	1667	256
Dependencias de npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cnembla-carousel-react`
Construido con	`buttonnumber-flowtheme`	`button`

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Partes

Solo en HextaUICarouselDotsCarouselCounterCarouselAutoplayToggleCarouselThumbnailsCarouselThumbnail

En ambosCarouselCarouselContentCarouselItemCarouselPreviousCarouselNext

Props que añade HextaUI

Props que gestiona el propio envoltorio de HextaUI y el de shadcn/ui no. Se omiten las props que pasan directamente a Base UI o a la librería subyacente, porque ambas versiones las aceptan.

Prop	Qué hace
`defaultIndex`Carousel	Ver la referencia de la API
`rewind`Carousel	Vuelve de la última diapositiva a la primera.
`mouseDrag`Carousel	Permite que un ratón arrastre las diapositivas.
`autoplay`Carousel	Avanza con un temporizador. delay vale 5000 ms por defecto, con un mínimo de 1000 ms.
`viewportClassName`CarouselContent	Se aplica al viewport de desplazamiento.
`variant`CarouselAutoplayToggle	Ver la referencia de la API

Variantes

Prop	En ambos	Solo HextaUI	Solo shadcn/ui
`spacing`Carousel	–	`nonesmdefaultlg`	–
`orientation`CarouselNav	–	`horizontalvertical`	–
`direction`CarouselNav	–	`previousnext`	–

La versión de HextaUI

import {
  Carousel,
  CarouselContent,
  CarouselDots,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

const slides = [1, 2, 3, 4, 5]

export function CarouselDemo() {
  return (
    <div className="w-full max-w-xs px-12">
      <Carousel aria-label="Numbers">
        <CarouselContent>
          {slides.map((value) => (
            <CarouselItem key={value}>
              <div className="flex aspect-square items-center justify-center rounded-xl border bg-card p-6 text-4xl font-semibold">
                {value}
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
        <div className="mt-3 flex justify-center">
          <CarouselDots />
        </div>
      </Carousel>
    </div>
  )
}

Todos los estados, el mapa de teclado y la referencia de la API están en la página del componente.

13 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

pnpm dlx shadcn@latest add https://hextaui.com/r/carousel.json --overwrite

Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.