104Empezar

Pagination: HextaUI y shadcn/ui

El Pagination de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

MedidaHextaUIshadcn/ui
Partes exportadas77
Props que gestiona el envoltorio194
Líneas de código742151
Dependencias de npm@base-ui/react@^1.8.0@tabler/icons-reactcncn
Construido conbuttonmotionthemeuse-paginationbutton

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Props que añade HextaUI

Props que gestiona el propio envoltorio de HextaUI y el de shadcn/ui no. Se omiten las props que pasan directamente a Base UI o a la librería subyacente, porque ambas versiones las aceptan.

PropQué hace
pagePaginationVer la referencia de la API
defaultPagePaginationVer la referencia de la API
siblingsPaginationPáginas que se muestran a cada lado de la actual.
boundariesPaginationPáginas que se muestran siempre al principio y al final.
getPageHrefPaginationRenderiza las páginas como enlaces en lugar de botones.
jumpPaginationPermite que los puntos suspensivos abran un campo de página.

La versión de 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>
  )
}

Todos los estados, el mapa de teclado y la referencia de la API están en la página del componente.

5 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

pnpm dlx shadcn@latest add https://hextaui.com/r/pagination.json --overwrite
  • Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
  • Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.

Otros componentes comparados

Más comparaciones