Carousel: HextaUI ve shadcn/ui

HextaUI Carousel, shadcn/ui adlarını ve tema token’larını korur ve aynı CLI ile kurulur. Bu sayfa, ikisinin kaynağından okunan farkları listeler. shadcn/ui tarafı, 2026-10-16 itibarıyla base-vega kayıt defteridir.

Bir bakışta

Ölçüt	HextaUI	shadcn/ui
Dışa aktarılan parçalar	10	5
Sarmalayıcının işlediği props	23	8
Kaynak kod satırı	1667	256
npm bağımlılıkları	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cnembla-carousel-react`
Şunlardan oluşur	`buttonnumber-flowtheme`	`button`

Daha fazla kod tek başına daha iyi değildir. HextaUI’deki ek satırların çoğu, aksi halde kendiniz yazacağınız durumları, hareketi ve uç durumları ele alır.

Parçalar

Yalnızca HextaUI’deCarouselDotsCarouselCounterCarouselAutoplayToggleCarouselThumbnailsCarouselThumbnail

İkisinde deCarouselCarouselContentCarouselItemCarouselPreviousCarouselNext

HextaUI’nin eklediği props

HextaUI sarmalayıcısının kendisinin işlediği, shadcn/ui sarmalayıcısının işlemediği props. Doğrudan Base UI’ye veya alttaki kütüphaneye geçirilen props, iki sürüm de kabul ettiği için listede yok.

Prop	Ne yapar
`defaultIndex`Carousel	API başvurusuna bakın
`rewind`Carousel	Son slayttan ilkine sarın.
`mouseDrag`Carousel	Slaytları fareyle sürüklemeye izin verin.
`autoplay`Carousel	Bir zamanlayıcıyla ilerler. delay varsayılanı 5000ms, asgari 1000ms.
`viewportClassName`CarouselContent	Kayan görünüm alanına uygulanır.
`variant`CarouselAutoplayToggle	API başvurusuna bakın

Varyantlar

Prop	İkisinde de	Yalnızca HextaUI	Yalnızca shadcn/ui
`spacing`Carousel	–	`nonesmdefaultlg`	–
`orientation`CarouselNav	–	`horizontalvertical`	–
`direction`CarouselNav	–	`previousnext`	–

HextaUI sürümü

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

Tüm durumlar, klavye haritası ve API başvurusu bileşen sayfasında.

Örneklerinden 13 tanesinin ayrıca kendi sayfası var.

Tek bir bileşeni değiştirin

@/components/ui içindeki shadcn/ui dosyasını değiştirmek için add komutunu --overwrite ile çalıştırın, ardından tutmadan önce git’teki farkı inceleyin. İçe aktarmalar aynı kalır ve değiştirmediğiniz bileşenler çalışmaya devam eder.

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

Yukarıdaki tablodaki her prop bir eklemedir, bu yüzden shadcn/ui için yazılmış kod onu henüz geçirmez.
Geçmeden önce yalnızca shadcn/ui için listelenen parça ve varyantları kontrol edin ve en yakın HextaUI karşılığıyla eşleştirin.