Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Navigation

With First and Last Pagination for React

First, Previous, the current page, Next and Last in one row.

Framework
UI library

First and Last at the ends, Previous and Next beside the current page, page 5. People can step one page or jump to either end. Use it for long lists where page numbers would take too much room.

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 order are the controls in?

First, PaginationPrevious, page 5, PaginationNext, Last, each in its own PaginationItem.

How do First and Last fit their words?

They are PaginationLinks with 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". The other controls are ghost links.

How do I change the Previous and Next words?

Pass text. The defaults are Previous and Next, and the accessible names are Go to previous page and Go to next page. The word is hidden below the sm breakpoint, where only the chevron shows.

What happens at either end of the list?

Pagination doesn't know your page count: leave PaginationPrevious out on page 1 and PaginationNext out on the last page, or disable them.

How do I point the links at real pages?

Every href is #. Point First at page 1, Previous and Next at the neighboring pages and Last at the last page.

All 19 pagination examples