Carousel: HextaUI e shadcn/ui

O Carousel do HextaUI mantém os nomes e tokens de tema do shadcn/ui e instala com a mesma CLI. Esta página lista o que muda, lido do código de ambos. O lado do shadcn/ui é o registro base-vega em 2026-10-16.

Visão geral

Medida	HextaUI	shadcn/ui
Partes exportadas	10	5
Props tratadas pelo wrapper	23	8
Linhas de código	1667	256
Dependências do npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cnembla-carousel-react`
Construído com	`buttonnumber-flowtheme`	`button`

Mais código não é melhor por si só. A maior parte das linhas extras do HextaUI cuida de estados, animações e casos extremos que você escreveria por conta própria.

Partes

Só no HextaUICarouselDotsCarouselCounterCarouselAutoplayToggleCarouselThumbnailsCarouselThumbnail

Em ambosCarouselCarouselContentCarouselItemCarouselPreviousCarouselNext

Props que o HextaUI adiciona

Props que o próprio wrapper do HextaUI trata e o do shadcn/ui não. Props repassadas direto ao Base UI ou à biblioteca por baixo ficam de fora, porque as duas versões as aceitam.

Prop	O que faz
`defaultIndex`Carousel	Ver a referência da API
`rewind`Carousel	Volta do último slide para o primeiro.
`mouseDrag`Carousel	Permite arrastar os slides com o mouse.
`autoplay`Carousel	Avança por um temporizador. delay tem padrão de 5000ms, mínimo de 1000ms.
`viewportClassName`CarouselContent	Aplicado ao viewport de rolagem.
`variant`CarouselAutoplayToggle	Ver a referência da API

Variantes

Prop	Em ambos	Só HextaUI	Só shadcn/ui
`spacing`Carousel	–	`nonesmdefaultlg`	–
`orientation`CarouselNav	–	`horizontalvertical`	–
`direction`CarouselNav	–	`previousnext`	–

A versão do 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 os estados, o mapa de teclado e a referência da API estão na página do componente.

13 dos seus exemplos também têm uma página própria.

Troque um componente

Rode o comando add com --overwrite para substituir o arquivo do shadcn/ui em @/components/ui e revise o diff no git antes de mantê-lo. Os imports continuam iguais e os componentes que você não trocar seguem funcionando.

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

Cada prop da tabela acima é nova, então o código escrito para o shadcn/ui ainda não a passa.
Antes de trocar, confira qualquer parte ou variante listada só para o shadcn/ui e associe-a à mais próxima do HextaUI.