Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Sizes

Compact Pagination for React

Three page numbers packed close together with a smaller gap.

Framework
UI library

Three page numbers with page 2 current, closer together than the default. Use it in table footers and side panels where width is tight.

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

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

Where does the tight spacing come from?

PaginationContent has className="gap-0.5". That is the only spacing class in the file. The links stay inside PaginationItems on that list.

How is the current page marked?

isActive on the page 2 link selects the outline variant and sets aria-current="page". The other two links stay ghost. Move isActive when the current page changes.

How do I link these numbers to real pages?

Each PaginationLink has href="#". Replace # with that page's URL. Pagination is a nav labeled "pagination".

How do I add Previous and Next to this row?

Put a PaginationPrevious and a PaginationNext in their own PaginationItems, before the first number and after the last. This file leaves both out.

How do I show more than three pages?

Add another PaginationItem and PaginationLink for each page, and keep gap-0.5 on PaginationContent. Put isActive on whichever link is current.

All 19 pagination examples