Carousel: HextaUI und shadcn/ui

Carousel von HextaUI behält die Namen und Theme-Tokens von shadcn/ui und wird mit derselben CLI installiert. Diese Seite listet die Unterschiede auf, aus dem Code beider gelesen. Die shadcn/ui-Seite ist das base-vega-Registry mit Stand 2026-10-16.

Auf einen Blick

Kennzahl	HextaUI	shadcn/ui
Exportierte Teile	10	5
Props, die der Wrapper verarbeitet	23	8
Codezeilen	1667	256
npm-Abhängigkeiten	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cnembla-carousel-react`
Aufgebaut aus	`buttonnumber-flowtheme`	`button`

Mehr Code ist für sich genommen nicht besser. Die meisten zusätzlichen Zeilen in HextaUI behandeln Zustände, Bewegung und Randfälle, die du sonst selbst schreiben würdest.

Teile

Nur in HextaUICarouselDotsCarouselCounterCarouselAutoplayToggleCarouselThumbnailsCarouselThumbnail

In beidenCarouselCarouselContentCarouselItemCarouselPreviousCarouselNext

Props, die HextaUI ergänzt

Props, die der HextaUI-Wrapper selbst verarbeitet und der shadcn/ui-Wrapper nicht. Props, die direkt an Base UI oder die zugrunde liegende Bibliothek gehen, fehlen hier, weil beide Versionen sie annehmen.

Prop	Was sie bewirkt
`defaultIndex`Carousel	Siehe API-Referenz
`rewind`Carousel	Von der letzten Folie zurück zur ersten springen.
`mouseDrag`Carousel	Die Folien mit der Maus ziehen lassen.
`autoplay`Carousel	Per Timer weiterschalten. delay beträgt standardmäßig 5000 ms, mindestens 1000 ms.
`viewportClassName`CarouselContent	Wird auf den scrollenden Viewport angewendet.
`variant`CarouselAutoplayToggle	Siehe API-Referenz

Varianten

Prop	In beiden	Nur HextaUI	Nur shadcn/ui
`spacing`Carousel	–	`nonesmdefaultlg`	–
`orientation`CarouselNav	–	`horizontalvertical`	–
`direction`CarouselNav	–	`previousnext`	–

Die HextaUI-Version

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

Alle Zustände, die Tastaturbelegung und die API-Referenz stehen auf der Komponentenseite.

13 seiner Beispiele haben auch eine eigene Seite.

Eine Komponente wechseln

Führe den add-Befehl mit --overwrite aus, um die shadcn/ui-Datei in @/components/ui zu ersetzen, und prüfe den Diff in git, bevor du ihn behältst. Die Imports bleiben gleich, und Komponenten, die du nicht ersetzt, funktionieren weiter.

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

Jede Prop in der Tabelle oben ist neu, daher übergeben Aufrufe, die für shadcn/ui geschrieben wurden, sie noch nicht.
Prüfe vor dem Wechsel jeden Teil und jede Variante, die nur bei shadcn/ui steht, und ordne sie dem nächsten HextaUI-Gegenstück zu.