Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Complete Pagination for React

Previous and Next around pages 1 to 3, with page 2 current, an ellipsis, and a link to page 10.

The row is Previous, pages 1, 2, and 3, an ellipsis, page 10, and Next. Page 2 is current. The ellipsis is not a link. Every href in the file is #.

Use it for search results and catalogs where people step, jump nearby, or skip to the end. If the list only grows, a Button labeled Load more is enough. In React, Base UI follows each href, and these all point at #.

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

Anatomy

Pagination anatomy: root, previous, item, ellipsis, next

Usage

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">10</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

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.

API Reference

Pagination

Sets href="#" and isActive. The rest is on the Pagination page.

All 19 pagination examples