Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Sizes

Large Size Pagination for React

Pagination with large page buttons and a wider gap, for touch screens.

Framework
UI library

Previous, three page numbers and Next at the large button size, with a wider gap. Bigger targets suit touch screens and pages where pagination is the main way through the content.

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 is the row made large?

PaginationPrevious and PaginationNext take size="lg", the page links size="icon-lg": the large button sizes. PaginationContent takes gap-2 to space them out.

How is the current page marked?

isActive on page 2 gives it the outline style and aria-current="page". The other numbers are ghost links.

When should I use the large size?

On touch screens and wherever pagination is the main way through the content, such as a blog index. Bigger targets are easier to hit.

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 is hidden below the sm breakpoint, where only the chevron shows.

How do I hide Previous on the first page?

Pagination doesn't know your page count: leave PaginationPrevious out on page 1 and PaginationNext out on the last page, or disable them.

How do I point the links at real pages?

Every href is #. Set each one to its page's URL, such as ?page=2.

All 19 pagination examples