Pagination

Navegación entre páginas totalmente controlada. Configura el número de páginas adyacentes (siblingCount), páginas de borde (boundaryCount), variante visual (pill/square), tamaño, y botones de primera/última página. Ideal para tablas, listas y galerías paginadas.

Instalación#

bash
pnpm add @tsukira/ui

Uso#

tsx
import { Pagination } from "@tsukira/ui"; function MiLista() {  const [page, setPage] = useState(1);  return (    <>      {/* …contenido de la página… */}      <Pagination page={page} total={20} onChange={setPage} showFirstLast />    </>  );}

Ejemplos#

Variantes visuales

pill · square

Tamaños

sm · md · lg

Con primera y última página

showFirstLast — añade botones « y » para saltar al inicio/fin

Siblings y boundary personalizados

siblingCount=2, boundaryCount=2 — más páginas visibles cerca de la actual y en los extremos

Fusión: pie de tabla con contador de registros

Pagination + texto 'X de Y' como footer de una Table
JuegoGéneroJugadores
Leyendas de KimiRPG4,2 M
Arena EstelarAcción2,8 M
Rinascita OnlineMMORPG8,1 M
1–3 de 7 juegos

Fusión: paginación compacta en Card

Pagination dentro de una Card como control de galería o listado embebido
Galería

Pantalla del combate principal

Imagen 1 de 5

API#

PaginationPropsextends Omit<HTMLAttributes<HTMLElement>, 'onChange'>
PropTipoDefaultDescripción
page*number—Página actual (1-based).
totalnumber—Cantidad total de páginas.
totalPagesnumber—Alias deprecado de total.
onChange((page: number) => void)—Cambio de página.
onPageChange((page: number) => void)—Alias deprecado de onChange.
siblingCountnumber—Cuántas páginas adyacentes mostrar antes de elipsis.
boundaryCountnumber—Cuántas páginas mostrar en bordes.
showPrevNextboolean—Mostrar prev/next.
showFirstLastboolean—Mostrar primera/última (« »).
size'sm' | 'md' | 'lg'——
variant'pill' | 'square'——