Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Basic

Five Page Numbers Pagination for React

Five page numbers with the middle one, page 3, as the current page.

Framework
UI library

Pages 1 to 5 with page 3 current and no other controls. Use it when the whole set fits in five pages, such as a short gallery or a multi-page form.

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

Five PaginationLinks, numbered 1 through 5. Page 3 has isActive. There is no PaginationPrevious, PaginationNext, or PaginationEllipsis.

How is page 3 shown as current?

isActive selects the outline variant and sets aria-current="page". The other four links stay ghost. Move isActive to mark a different link.

How do I show a different run of five pages?

The numbers are hardcoded. Replace 1, 2, 3, 4 and 5, and put isActive on the current one. PaginationContent has no extra gap class in this file.

How do I link each number to its page?

Every href is #. Set each PaginationLink's href to that page's URL. The nav is labeled "pagination".

How do I add Previous and Next around these numbers?

Wrap PaginationPrevious and PaginationNext in PaginationItems, before page 1 and after page 5. This demo renders only the five numbers.

What does a screen reader hear for each link?

The link text is the page number. The current one also has aria-current="page" from isActive. The landmark is the nav labeled "pagination".

All 19 pagination examples