Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Sizes

Default Size Pagination for React

Pagination at the default size, with Previous, three page numbers and Next.

Framework
UI library

Previous, pages 1 to 3 with page 2 current, and Next at the component's default size and spacing. Compare it with the small, large, compact and spacious versions.

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 size does this pagination use?

The file passes no size and no height class. PaginationLink defaults to size="icon-md". PaginationPrevious and PaginationNext pass size="md".

What is in the row?

PaginationPrevious, links for 1, 2 and 3, and PaginationNext. Page 2 has isActive, so it is the outline link with aria-current="page".

How is the gap chosen?

PaginationContent has no gap-* class in this file. The gap comes from the cn-pagination-content style, which is gap-0.5 in some styles and gap-1 in others.

How do I point Previous, the numbers, and Next at real URLs?

Every href is #. Set href on PaginationPrevious, each PaginationLink, and PaginationNext to that page's URL.

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", and the nav is labeled "pagination".

How do I stop Previous on the first page?

This demo always renders PaginationPrevious with href="#". Leave PaginationPrevious out on page 1 and PaginationNext out on the last page.

All 19 pagination examples