Aller au contenu

Composants · Référence

Pagination

Controlled pagination controls with page-size selection, result summaries, compact layouts, and localized labels.

Dernière mise à jour le 28 septembre 2026

Overview

Pagination is a controlled paginator for lists, cards, and tables. It includes a page-size selector, current-page status, first/previous/next/last navigation, optional result and selection summaries, and a compact mode for narrow containers. English and French labels are built in and can be overridden through messages.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. Message overrides are keyed by arbitrary locale strings, so additional languages can be supplied with messages={{ es: { ... } }}. Exact locale keys such as es-MX take precedence over base keys such as es; English is the final fallback.

Install

shell
bunx shadcn@latest add @krak-stack/pagination

Usage

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

<Pagination
  page={page}
  pageCount={pageCount}
  pageSize={pageSize}
  totalRows={total}
  onPageChange={setPage}
  onPageSizeChange={(size) => {
    setPage(0);
    setPageSize(size);
  }}
/>

Use compact in sidebars or narrow result panels, and showResults={false} when the surrounding view already displays a result count.

Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies

Preview

Pagination
Navigation contrôlée entre les pages avec sélection de la taille, résumé des résultats et mises en page adaptatives.

Mise en page complète

137 résultats3 sur 137
Page 3 sur 14

Mise en page compacte

Page 3 sur 14