shadcn.io is not affiliated with official shadcn/ui
Pagination examples · Advanced
Many Pages Pagination for React
Ten page numbers in a row with page 5 as the current page.
All ten pages in one row with page 5 current, rendered from a list of page numbers. Use it when every page fits on screen; past ten or so, collapse the middle with an ellipsis.
Preview
Installation
FAQ
How are the ten links rendered?
The page numbers are a list, 1 to 10, mapped to one PaginationItem and PaginationLink each, keyed by the page number.
How is page 5 marked current?
isActive is true where the page equals 5, which gives that link the outline style and aria-current="page". Compare against your current page instead.
What if the row is too wide?
Ten links fit most screens; more don't. Collapse the middle with PaginationEllipsis, keeping the first, last and nearby pages.
Can Pagination generate the numbers for me?
No. Render the PaginationLinks yourself, and put a PaginationEllipsis in each gap you don't list.
Related
- Start Ellipsis PaginationPagination near the end, with an ellipsis
- End Ellipsis PaginationPagination near the start, with an
- Both Ellipsis PaginationPagination on page 6 of 20, with an
- Disabled State PaginationPagination on the first page, with
- Basic Data Table with CheckboxesA table of products with a checkbox on
- Complete PaginationPagination with Previous and Next, the