Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Navigation

First and Last Pagination for React

First and Last links on either side of the current page.

Framework
UI library

First, the current page, page 5, and Last. People jump to either end of the list in one click. Use it when the ends matter more than the neighbors, such as newest and oldest entries.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What does the row render?

Three PaginationLinks: First, page 5 and Last. There is no PaginationPrevious or PaginationNext.

How do First and Last fit their words?

They take size="md", the size Previous and Next use, instead of the default square page size.

How is the current page marked?

isActive on page 5 gives it the outline style and aria-current="page". First and Last are ghost links named by their words.

What should First and Last do on the first and last page?

On page 1, First leads to the page you're on; disable it or leave it out, and the same for Last on the last page.

How do I add Previous and Next?

Put PaginationPrevious after First and PaginationNext before Last, each in its own PaginationItem, as the First and Last with Previous and Next example does.

How do I point the links at real pages?

Every href is #. Point First at page 1, Last at the last page and the number at its own page.

All 19 pagination examples