Shadcn Pagination Examples: Page Navigation Done Right in React
Pagination splits long result sets into pages and gives users next, previous, and numbered links to move between them. The shadcn pagination component provides the full anatomy, previous and next controls, page links with an active state, and an ellipsis for collapsed ranges, as semantic nav markup styled with Tailwind CSS, making it a dependable react pagination component for tables and listings.
This page assembles 12 pagination examples, Pagination 1 through Pagination 12, including compact mobile layouts, icon-only arrows, page size selectors, total count summaries, and table footer bars. All examples ship in TypeScript and adapt to Next.js link-based or state-based navigation.
Key features
- Semantic nav markup: The root renders a nav with aria-label pagination, so assistive technology identifies the region correctly.
- Active page indication: PaginationLink accepts isActive, which sets aria-current and the outlined style for the current page.
- Ellipsis for long ranges: PaginationEllipsis collapses distant pages so ranges like 1 through 40 stay compact.
- Link or button behavior: Items render as anchors for URL-driven paging or as buttons when state drives the page.
- Composable layout: Page size selects, result counts, and jump controls slot around the core list without fighting the styles.
Best practices
- Reflect the page in the URL: Query param based paging keeps results shareable and lets the back button work as users expect.
- Disable edges instead of hiding: Show previous as disabled on page one rather than removing it, so the layout never jumps.
- Show context near boundaries: Always render the first and last page numbers around the ellipsis so users can jump to the ends.
- Pick page sizes deliberately: Offer a small set like 10, 25, and 50 rows and persist the choice per user.
- Consider infinite scroll carefully: Numbered pagination beats infinite scroll whenever users need to return to a specific position.
Common use cases
Table footers are the primary destination. A data table of orders pairs server-side paging with a pagination bar showing the range, a page size select, and the page links. Search results, blog archives, and product listings use the same anatomy with URL-based links for SEO friendly crawling.
Admin panels often combine the compact icon-only variant on mobile with the full numbered layout on desktop. The dashboards in our Next.js template collection wire this responsive switch into real order and customer tables.
Playing well with tables and lists
Beyond the table, pagination pairs with card grids and item lists anywhere the dataset exceeds one screen. Keeping the bar outside a scroll area ensures the controls stay visible while rows scroll, and a summary line such as showing 21 to 30 of 148 grounds users in the whole set.
Under the hood
No primitive library is involved. The component is accessible nav markup styled with Tailwind CSS and the shared button styles, as laid out in the shadcn/ui pagination docs, so these pagination examples slot into Radix UI and Base UI based projects alike. Because links are plain anchors by default, server rendered pages get crawlable page URLs for free.