Skip to content

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

Free

End Ellipsis Pagination for React

Near the start of a 10 page list: Previous, pages 1 to 3 with page 2 current, an ellipsis, page 10, and Next.

The row is Previous, pages 1, 2, and 3, an ellipsis, page 10, and Next. Page 2 is current. The ellipsis stands in for pages 4 to 9 and is not a link.

Use it when the current page is near the start and the last page should stay one click away. A Select is another way to jump. In React, Base UI does not build the gap. You choose which pages to show.

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

Where does the ellipsis sit in this row?

After pages 1, 2 and 3, and before the link for page 10. Page 2 has isActive. PaginationPrevious opens the row and PaginationNext closes it.

What is PaginationEllipsis here?

A span with aria-hidden and a more-horizontal icon. It is not a link. Pages 4 to 9 are not rendered. The nav is labeled "pagination".

How do I mark another page as current?

Move isActive to that PaginationLink. isActive sets the outline variant and aria-current="page". This file hardcodes the numbers, so change 1, 2, 3 and 10 yourself.

How do I give these controls real URLs?

Every href is #. Set it on PaginationPrevious, each PaginationLink, and PaginationNext.

How is the last page shown?

As a PaginationLink whose text is 10, after the ellipsis. It does not have isActive in this file.

How do I change the Previous and Next labels?

Pass text. They default to "Previous" and "Next", with accessible names "Go to previous page" and "Go to next page". The label span uses hidden sm:block.

API Reference

Pagination

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

All 19 pagination examples