Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Navigation

Previous and Next Only Pagination for React

Only Previous and Next buttons, for paging through a feed or a long list.

Framework
UI library

Just Previous and Next, with no page numbers. Use it for feeds, articles split into pages, and cursor-based lists where the total isn't known.

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 this row render?

PaginationPrevious and PaginationNext, each in a PaginationItem. There is no PaginationLink and no page number.

What are the accessible names?

Previous is "Go to previous page" and Next is "Go to next page". The visible text defaults to "Previous" and "Next", in a span with hidden sm:block. The chevrons are aria-hidden. The nav is labeled "pagination".

How do I point Previous and Next at real pages?

Both use href="#". Set each href to that step's URL.

How do I change the words?

Pass text on PaginationPrevious and PaginationNext. The icon stays, and the accessible name stays "Go to previous page" or "Go to next page" unless you override aria-label.

How do I stop Previous on the first page?

This file always renders both controls as links. Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

How do I show which page this is?

This file does not. Add a PaginationItem between the two controls if you want a label there. The two buttons alone do not announce a page number.

All 19 pagination examples