Pagination

Data

Page navigator with sibling pages, edge buttons, size variants and item count display.

Instalação via CLI

$ npx kikitocn add pagination

Interno:

@/lib/utils

Exemplo de uso

PaginationExample.tsx

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

export function PaginationExample() {
  return (
    <Pagination />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`page*`	`number`	—	Página atual (1-indexed)
`totalPages*`	`number`	—	Total de páginas
`onChange*`	`(page: number) => void`	—	Callback quando a página muda
`size`	`'sm' \| 'md'`	`'md'`	Tamanho dos botões de página
`showEdges`	`boolean`	`false`	Exibe botões de primeira/última página
`siblings`	`number`	`1`	Número de páginas irmãs ao redor da atual
`totalItems`	`number`	`undefined`	Total de itens (usado para exibir 'Showing X of Y')
`pageSize`	`number`	`undefined`	Itens por página (usado para exibir 'Showing X of Y')

Carregando…