Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Basic

Simple Page Numbers Pagination for React

Three page numbers with page 2 as the current page, and no other controls.

Framework
UI library

The smallest pagination: three page numbers with page 2 current. Use it for a short set of pages where Previous and Next would add more than they help.

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

Three PaginationLinks, numbered 1, 2 and 3. Page 2 has isActive. There is no Previous, Next, or ellipsis, and PaginationContent has no gap class.

How does isActive change page 2?

It selects the outline variant and sets aria-current="page". Pages 1 and 3 stay ghost. Move isActive to the link that should be current.

How do I link 1, 2 and 3 to real URLs?

Each href is #. Set it to that page's URL. Pagination is a nav labeled "pagination".

How do I tighten or loosen the three links?

Put a gap class on PaginationContent. This file does not, so the gap comes from the cn-pagination-content style (gap-0.5 or gap-1, depending on the style).

How do I add a fourth page?

Add another PaginationItem with a PaginationLink. Keep a single isActive on the current page. The links in this file are written out one by one.

What does assistive tech hear?

The link text is the number, and the current link has aria-current="page". The landmark name is "pagination", from aria-label on the nav.

All 19 pagination examples