Skip to content

Components · Reference

Pagination

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

Last updated September 28, 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
Controlled page navigation with page-size selection, result summaries, and responsive layouts.

Full layout

137 results3 of 137
Page 3 of 14

Compact layout

Page 3 of 14