Components
Pagination
Controlled pagination controls with page-size selection, result summaries, compact layouts, and localized labels.
Install
Add this registry item to your app with shadcn.
bash
bunx --bun shadcn@latest add https://krakstack.net/r/pagination.jsonOverview
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.
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