Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Sizes

Small Size Pagination for React

Pagination with small page buttons and a tight gap, for dense tables.

Framework
UI library

Previous, three page numbers and Next at the small button size, close together. Use it in table footers and dense dashboards where the default size takes too much room.

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 small?

PaginationPrevious and PaginationNext take size="sm", the page links size="icon-sm": the small button sizes. PaginationContent takes gap-0.5 to bring them closer.

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.

Are the small buttons big enough to tap?

They are meant for pointer-heavy screens such as dashboards. On touch screens, use the default or large size so each target is 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