Pagination
Pagination with smart ellipses, first / last buttons, page-size select and a result summary.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
PaginationProps
Also accepts all props of Omit<React.ComponentProps<"nav">, "onChange">
| Prop | Type | Default | Description |
|---|---|---|---|
| totalItems* required | number | — | — |
| page | number | — | — |
| defaultPage | number | — | — |
| onPageChange | (page: number) => void | — | — |
| pageSize | number | — | — |
| defaultPageSize | number | — | — |
| pageSizeOptions | number[] | — | Show a page-size select when non-empty |
| onPageSizeChange | (size: number) => void | — | — |
| siblingCount | number | — | Pages shown on each side of the current page |
| showFirstLast | boolean | — | — |
| showSummary | boolean | — | "Showing 1–10 of 240" summary text |
| variant | "outline" | "ghost" | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/pagination.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.