Carregando…Carregando…Carregando…Carregando…Page navigator with sibling pages, edge buttons, size variants, item count display and animated sliding indicator.
$ npx kikitocn add pagination@/lib/utils@/lib/motionmotionimport { Pagination } from "@/components/ui/cn/pagination/Pagination";
export function PaginationExample() {
return (
<Pagination page={50} totalPages={50} size="sm" />
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
page* | number | — | Página atual (0-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 | true | 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') |
className | string | — | Classes extras pro elemento nav raiz |
style | CSSProperties | — | Estilos inline pro elemento nav raiz |
Pagination — navigator with ellipsis, range label and edge buttons