Docs › Components › Pagination

Shadcn Pagination

The shadcn/ui Pagination navigates between pages of results, styled with Tailwind CSS v4. It renders accessible previous/next controls, numbered page links, and an ellipsis for long ranges. Pagination drives product lists, tables, and blogs across ShadcnStore blocks.

Key features

• Previous/next controls and numbered page links.
• Active page state with aria-current.
• Ellipsis for collapsing long page ranges.
• Links compose with any framework's Link via render.

Installation

npx shadcn@latest add pagination

Usage

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

export function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="?page=1" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="?page=2" isActive>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="?page=3" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  )
}

Composition

PaginationLink renders as an anchor by default. Use render to compose with your router's link component:

<PaginationLink render={<Link href="?page=2" />} isActive>2</PaginationLink>

Accessibility

• The component uses a nav landmark; keep its label ("pagination").
• Mark the current page with isActive so aria-current is set.
• Ensure previous/next controls have accessible names, not just icons.

When to use the Pagination

Use pagination when a list is split into discrete pages the user navigates and may want to link to: product grids, tables, search results, and blogs. For continuously loading feeds, use infinite scroll with a "load more" Button. For in-page sections, use Tabs.

Used in these blocks

• Product list: product page navigation.
• Order history: paged orders.
• Datatables: table page controls.

Related components

Pagination sits under a Data Table or product grid, uses Button-styled controls, and pairs with a Select for page size.

FAQ

What is the shadcn pagination used for?

The Pagination component navigates between pages of results, with previous/next controls, page links, and an ellipsis for long ranges.

How do I mark the current page?

Set isActive on the PaginationLink for the current page; it applies the active style and aria-current.

Should pagination use links or buttons?

Use real links with the page URL where possible so pages are shareable and crawlable; render them via render with your framework Link.

How do I wire pagination to a data table?

Drive the table's page index from the URL or state and update it in the pagination link handlers. See the Data Table page.