Carousel : HextaUI et shadcn/ui

Le Carousel de HextaUI garde les noms et les tokens de thème de shadcn/ui et s’installe avec la même CLI. Cette page liste ce qui diffère, lu dans le code des deux. Le côté shadcn/ui correspond à son registre base-vega au 2026-10-16.

En un coup d’œil

Mesure	HextaUI	shadcn/ui
Parties exportées	10	5
Props gérées par l’enveloppe	23	8
Lignes de code	1667	256
Dépendances npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cnembla-carousel-react`
Construit avec	`buttonnumber-flowtheme`	`button`

Plus de code n’est pas mieux en soi. La plupart des lignes en plus dans HextaUI gèrent des états, des animations et des cas limites que vous écririez sinon vous-même.

Parties

Seulement dans HextaUICarouselDotsCarouselCounterCarouselAutoplayToggleCarouselThumbnailsCarouselThumbnail

Dans les deuxCarouselCarouselContentCarouselItemCarouselPreviousCarouselNext

Props ajoutées par HextaUI

Les props gérées par l’enveloppe HextaUI elle-même et pas par celle de shadcn/ui. Les props transmises telles quelles à Base UI ou à la bibliothèque sous-jacente sont exclues, car les deux versions les acceptent.

Prop	Rôle
`defaultIndex`Carousel	Voir la référence de l’API
`rewind`Carousel	Revient de la dernière diapositive à la première.
`mouseDrag`Carousel	Permet à la souris de faire glisser les diapositives.
`autoplay`Carousel	Avance automatiquement selon un minuteur. delay vaut 5000 ms par défaut, 1000 ms au minimum.
`viewportClassName`CarouselContent	Appliqué à la zone de défilement visible.
`variant`CarouselAutoplayToggle	Voir la référence de l’API

Variantes

Prop	Dans les deux	Seulement HextaUI	Seulement shadcn/ui
`spacing`Carousel	–	`nonesmdefaultlg`	–
`orientation`CarouselNav	–	`horizontalvertical`	–
`direction`CarouselNav	–	`previousnext`	–

La version 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>
  )
}

Tous les états, les raccourcis clavier et la référence de l’API sont sur la page du composant.

13 de ses exemples ont aussi leur propre page.

Changer un composant

Lancez la commande add avec --overwrite pour remplacer le fichier shadcn/ui dans @/components/ui, puis relisez le diff dans git avant de le garder. Les imports restent les mêmes et les composants que vous ne remplacez pas continuent de fonctionner.

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

Chaque prop du tableau ci-dessus est un ajout, donc le code écrit pour shadcn/ui ne la passe pas encore.
Avant de changer, vérifiez chaque partie ou variante listée seulement pour shadcn/ui et associez-la à l’équivalent HextaUI le plus proche.