Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Basic

Complete Pagination for React

Pagination with Previous and Next, the first pages, an ellipsis and the last page.

Framework
UI library

The full row: Previous, pages 1 to 3 with page 2 current, an ellipsis for the pages in between, the last page and Next. People can step one page, jump to a nearby page, or go straight to the end. Use it for search results, product listings and archives.

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

Which parts are in this pagination row?

PaginationPrevious, links for pages 1, 2 and 3, a PaginationEllipsis, a link for page 10, and PaginationNext. Page 2 has isActive, which uses the outline variant and sets aria-current="page".

How do I show a different set of pages?

Change the link text and move isActive to the current page. This file hardcodes 1, 2, 3, the ellipsis, and 10. Pagination is a nav labeled "pagination".

Is the ellipsis a link?

No. PaginationEllipsis is a span with aria-hidden and a more-horizontal icon. Here it occupies the gap where pages 4 to 9 are not rendered.

How do I point each control at a real URL?

Every href in this file is #. Set href on PaginationPrevious, each PaginationLink, and PaginationNext to that page's URL.

How do I disable Previous on the first page?

This file always renders PaginationPrevious with href="#", beside the current page 2. Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

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 sits in a span with hidden sm:block, so below sm only the chevron shows. The icon is aria-hidden.

All 19 pagination examples