Shadcn Pagination Components

Shadcn Pagination Component

The Shadcn Pagination component splits long lists of content into pages and gives users a clear way to move between them. Blog archives, search results, product listings and admin tables all rely on it, because loading everything at once is slow and hard to scan, while pages keep each view short and give users a sense of where they are.

Numbered pages with ellipsis, a Page 2 of 10 counter, table footers with a rows per page select and a jump to page input are the main patterns collected here. The shadcn/ui pagination component is plain semantic HTML written in React and styled with Tailwind CSS, with no primitive dependency, so it fits Radix UI and Base UI codebases alike.

What is the Shadcn Pagination Component?

The shadcn/ui pagination is a nav element labelled "pagination" that contains a list of links. Every page link is a real anchor styled with the Button variants: the current page uses the outline style and aria-current="page", the others use the ghost style. Previous and Next links include a chevron and a label, and an ellipsis marks skipped pages. Because the component only renders markup, you decide how pages are calculated and whether links change the URL or update state.

Use pagination when users need to reach a specific page, share a link to it or know how many results there are. For a feed where people just keep reading, infinite scroll or a Load more Button is often simpler. When the pages belong to a table with sorting and filtering, combine pagination with the Data Table, and for moving between levels of a site hierarchy use a Breadcrumb instead.

Anatomy of the Shadcn Pagination

12 Shadcn Pagination Variants

Each pagination variant listed here is previewed live at the top of this page, together with its source code and install command.

• Previous and next: Two buttons spread across the full width, in outline style or in ghost style with arrows that nudge on hover.
• Page counter: A Page 2 of 10 label between or beside arrow buttons, announced politely to screen readers when it changes.
• Numbered with ellipsis: Page numbers around the current page with ellipsis on either side and Previous and Next links, calculated by a small usePagination hook.
• First and last page: Adds first and last page buttons to the numbered list for jumping to either end of long result sets.
• Joined group: Outline buttons that share borders and rounded outer corners, forming a single connected control.
• With rows per page: Table footers with a page size select, a 1-25 of 100 range or page label, and numbered or first, previous, next and last controls.
• Jump to page: Lets users pick a page from a select menu or type a page number into a Go to page input.

How to Install the Shadcn Pagination Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a pagination variant by its name:

npx shadcn@latest add @shadcnuikit/pagination1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Pagination Component

Import the parts from your components/ui folder, render one PaginationItem per page and mark the current one with isActive. Links can point to real URLs, which keeps every page shareable and crawlable.

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"

export function BlogPagination({ page }: { page: number }) {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href={`/blog?page=${page - 1}`} />
        </PaginationItem>
        {[1, 2, 3].map((n) => (
          <PaginationItem key={n}>
            <PaginationLink href={`/blog?page=${n}`} isActive={n === page}>
              {n}
            </PaginationLink>
          </PaginationItem>
        ))}
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href={`/blog?page=${page + 1}`} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Why Use the Shadcn Pagination Component

• Semantic navigation: A labelled nav, a list and real links give screen readers and search engines a clear structure.
• Shareable pages: Each page can have its own URL, so users can bookmark, share and return to a specific page.
• Consistent styling: Links reuse the Button variants, so pagination matches the rest of your interface and theme.
• Logic stays yours: The component only renders markup, so it works with server rendering, URL params or client state.
• Composable controls: Add page counters, page size selects and jump to page inputs next to the links without changing the component.

Common Pagination Use Cases

• Blogs and archives: Move through older posts, news and changelog entries.
• Search results: Split large result sets into pages with a clear count of the total.
• E-commerce listings: Browse product grids and category pages page by page.
• Admin tables: Table footers with rows per page and first and last page buttons.
• Documentation: Previous and next links at the bottom of docs pages.

Customizing the Shadcn Pagination

Change the spacing on PaginationContent, the size of the links with the size prop, or the whole look with a className. To join the buttons into one group, remove the gap, overlap the borders with -space-x-px and round only the first and last items, as the joined variant does. Colors come from your theme, and the free Theme Generator can create a matching palette.

On the first and last page, disable the Previous or Next link by removing its href and marking it with aria-disabled:

<PaginationPrevious
  href={page === 1 ? undefined : `?page=${page - 1}`}
  aria-disabled={page === 1 ? true : undefined}
  className="aria-disabled:pointer-events-none aria-disabled:opacity-50"
/>

Pagination Accessibility and Keyboard Support

The root is a nav landmark labelled "pagination", so screen reader users can jump to it directly. The current page link has aria-current="page", Previous and Next have descriptive labels such as "Go to previous page", and the ellipsis is hidden from assistive technology. Give icon only links like first and last page their own aria-label.

When a page counter changes without a full page load, wrap it in an element with aria-live="polite", as the counter variants on this page do, so the new page number is announced.

Pagination Best Practices

• Always highlight the current page so users know where they are.
• Show a limited range of page numbers with ellipsis instead of every page.
• Keep the page in the URL, for example ?page=3, so results survive a refresh and can be shared.
• Disable Previous on the first page and Next on the last page.
• Show the total, such as Page 3 of 12 or 1-25 of 100, when users need to know the size of the list.
• Scroll back to the top of the list when the page changes.

Components Related to Pagination

Shadcn Pagination FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.