104Başlayın

Pagination: HextaUI ve shadcn/ui

HextaUI Pagination, 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çütHextaUIshadcn/ui
Dışa aktarılan parçalar77
Sarmalayıcının işlediği props194
Kaynak kod satırı742151
npm bağımlılıkları@base-ui/react@^1.8.0@tabler/icons-reactcncn
Şunlardan oluşurbuttonmotionthemeuse-paginationbutton

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.

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.

PropNe yapar
pagePaginationAPI başvurusuna bakın
defaultPagePaginationAPI başvurusuna bakın
siblingsPaginationGeçerli sayfanın her iki yanında gösterilen sayfalar.
boundariesPaginationBaşta ve sonda her zaman gösterilen sayfalar.
getPageHrefPaginationSayfaları düğme yerine bağlantı olarak işler.
jumpPaginationÜç noktanın bir sayfa alanı açmasına izin verir.

HextaUI sürümü

Showing 1–10 of 248 results

"use client"

import * as React from "react"

import { Pagination } from "@/components/ui/pagination"

const perPage = 10
const total = 248

export function PaginationDemo() {
  const [page, setPage] = React.useState(1)
  const first = (page - 1) * perPage + 1
  const last = Math.min(page * perPage, total)

  return (
    <div className="flex w-full flex-col items-center gap-4">
      <Pagination
        page={page}
        count={Math.ceil(total / perPage)}
        onPageChange={setPage}
      />
      <p className="text-sm text-muted-foreground tabular-nums">
        Showing {first}–{last} of {total} results
      </p>
    </div>
  )
}

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

Örneklerinden 5 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/pagination.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.

Karşılaştırılan diğer bileşenler

Diğer karşılaştırmalar