Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Sizes

Spacious Pagination for React

Three page numbers spread apart with a wide gap.

Framework
UI library

Three page numbers with page 2 current and a wide gap between them. More space makes each number an easier target and gives the row a calmer look on landing pages and blogs.

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

Where does the wide spacing come from?

PaginationContent has className="gap-3". That class is the whole difference from a plain row of the same three links.

What does the row render?

Three PaginationLinks, for pages 1, 2 and 3. Page 2 has isActive. There is no PaginationPrevious or PaginationNext.

How is the current page marked?

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

How do I link the three numbers?

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

How do I change the space between the links?

Change gap-3 on PaginationContent. The links themselves have no margin class in this file.

How do I add Previous and Next without losing the gap?

Add them as PaginationItems inside the same PaginationContent, so gap-3 applies to them too. This file renders only the three numbers.

All 19 pagination examples