Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Basic

With Previous and Next Pagination for React

Three page numbers between Previous and Next buttons.

Framework
UI library

Previous, pages 1 to 3 with page 2 current, and Next. The most common row for a short list: people can step one page or jump to a number.

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

How are the arrows and the numbers arranged?

PaginationPrevious, then PaginationLinks for 1, 2 and 3, then PaginationNext. Page 2 has isActive. Each control is in its own PaginationItem.

How is page 2 marked current?

isActive uses the outline variant and sets aria-current="page". Pages 1 and 3 stay ghost. Move isActive to the current link.

How do I give every control a real URL?

Every href is #. Set it on PaginationPrevious, each PaginationLink, and PaginationNext. The nav is labeled "pagination".

How do I change the Previous and Next words?

Pass text. The defaults are "Previous" and "Next". The accessible names are "Go to previous page" and "Go to next page". The word uses hidden sm:block, and the chevron is aria-hidden.

How do I drop Previous on the first page?

This file always renders PaginationPrevious and PaginationNext. Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

How do I list a different three pages?

Change the three link texts and put isActive on the current one. PaginationContent has no gap or size class in this file.

All 19 pagination examples