Question 1

What is a shadcn pagination?

Accepted Answer

A shadcn pagination is the page-navigation strip you put at the bottom of paginated lists, tables, and search results — Previous, page numbers (with ellipsis for long ranges), Next. It's a styled HTML composition (no special primitive) using Buttons + a `<nav aria-label="pagination">` wrapper, with semantic ordered list semantics for the page numbers. shadcn ships PaginationContent / PaginationItem / PaginationLink / PaginationEllipsis / PaginationPrevious / PaginationNext as composable pieces.

Question 2

Are these pagination examples free?

Accepted Answer

Yes, every pagination example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

When should I paginate versus infinite scroll versus load more?

Accepted Answer

Paginate when users need to JUMP to specific pages, when SEO matters (search-engine-friendly URLs per page), and when results are deterministic (sorted, stable). Infinite scroll for feeds users browse passively (Twitter, Instagram). Load-more button as a middle ground (controlled by user, no SEO pages, can deep-link via session). For tables and search results, pagination wins.

Question 4

What's the difference between client-side and server-side pagination?

Accepted Answer

Client-side: load all rows once, slice in memory based on `page`, `pageSize`. Fast page changes (no network), but big initial payload. Works for under ~1000 rows. Server-side: query the backend with `page` / `pageSize` parameters, return only the current page. Scales to millions of rows but requires a backend roundtrip per page change. Use server-side for any list that grows unbounded.

Question 5

How do I implement ellipsis truncation for many pages?

Accepted Answer

Show: first page + ellipsis + 1-2 pages around current + ellipsis + last page. For 100 pages with current=50, render: `1 … 49 50 51 … 100`. The advanced variant in this gallery shows the canonical algorithm. Always show the first and last pages as anchors so users have a sense of the total range. Hide ellipses when there's no gap (current near the start or end).

Question 6

How do I add prev/next buttons with disabled state?

Accepted Answer

Use PaginationPrevious / PaginationNext. When `currentPage === 1`, the Previous button gets `disabled` and `aria-disabled="true"`. Same for Next when `currentPage === totalPages`. Don't hide the button — keep the layout stable. Visually muted state is enough; users learn the button exists but can't be used.

Question 7

How do I show page X of Y next to the pagination?

Accepted Answer

Render a small `

Showing 11–20 of 247 results

` above or beside the pagination. The numbers express "current page range / total" — more useful than just "page 2". For tables, also include the page-size selector ("10 / 20 / 50 per page") so users can adjust density. Pattern used by every dashboard table at scale.

Question 8

How do I install a pagination example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/pagination/…`, plus the shadcn/ui Pagination primitives (PaginationContent, PaginationItem, etc.) and Button.

Question 9

How do I sync the current page to the URL?

Accepted Answer

Use Next.js `useSearchParams()` + `useRouter()` (App Router) to read / write `?page=3` to the URL. On page click, call `router.push('?page=' + n)` (use `scroll: false` to avoid jumping to top). Reading from URL means deep links + browser back/forward work for free. Server-side pagination naturally pairs with this — the server reads `searchParams.page` and queries the right slice.

Question 10

How do I integrate pagination with TanStack Table or react-query?

Accepted Answer

TanStack Table's `pagination` state pairs cleanly with shadcn Pagination — pass the table's `getCanPreviousPage()` / `getCanNextPage()` to disable buttons, and `setPageIndex()` to handlers. For react-query / SWR with server-side fetching: include `page` in the query key so each page gets its own cache entry; prefetch the next page on hover for a snappier feel.

Question 11

Which libraries do pagination examples depend on?

Accepted Answer

shadcn/ui Pagination primitives (PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis — generated into your project by the CLI), Tailwind CSS, and Lucide React (chevron icons for prev/next, ellipsis dots). React 19 baseline. No state library — pagination state lives in URL params or your data fetching layer.

Question 12

Are pagination examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The pagination wrapper is a `

Question 13

Can I use these pagination examples with React Server Components?

Accepted Answer

Yes — pagination renders cleanly as a Server Component when the page number comes from URL params (`searchParams.page`). Each page navigation is a real link (next/link or `<a>` with the new URL), so no client state needed. For client-side pagination (in-memory list slicing), the pagination becomes a client component since the page state lives in `useState`.

React Pagination Examples for shadcn/ui

Browse every pagination example

What is a shadcn pagination?

Are these pagination examples free?

When should I paginate versus infinite scroll versus load more?

What's the difference between client-side and server-side pagination?