104Commencer

Pagination : HextaUI et shadcn/ui

Le Pagination 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

MesureHextaUIshadcn/ui
Parties exportées77
Props gérées par l’enveloppe194
Lignes de code742151
Dépendances npm@base-ui/react@^1.8.0@tabler/icons-reactcncn
Construit avecbuttonmotionthemeuse-paginationbutton

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.

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.

PropRôle
pagePaginationVoir la référence de l’API
defaultPagePaginationVoir la référence de l’API
siblingsPaginationPages affichées de chaque côté de la page courante.
boundariesPaginationPages toujours affichées au début et à la fin.
getPageHrefPaginationRend les pages comme des liens plutôt que des boutons.
jumpPaginationPermet aux points de suspension d'ouvrir un champ de page.

La version HextaUI

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

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

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

Autres composants comparés

Autres comparaisons