Pagination

Navigation

Splits long lists into navigable pages with numbered buttons.

Pagination always shows the first and last page plus a window around the current page, with ellipsis markers for the gaps in between.

npx shadcn@latest add pagination

Default

Step through pages with the chevrons or jump with the numbers.

Preview

Live

Page 5 of 12

tsx

1<Pagination
2  page={page}
3  pageCount={12}
4  onPageChange={setPage}
5/>

The window slides so you always see the current page and its neighbors.

Preview

Live

The ellipsis hides the far pages.

tsx

1<Pagination page={1} pageCount={12} onPageChange={() => undefined} />

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
page	number	The currently active page, 1-indexed.
pageCount	number	The total number of pages.
onPageChange	(page: number) => void	Called with the new page when the user navigates.
className	string	Override the classes of the nav wrapper.