Pagination

import * as React from "react"
import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
  PaginationSummary,
} from "@/components/ui/pagination"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,

Pagination is a set of link primitives you compose around your own page state. Pagination is the nav landmark. Inside it, PaginationContent is a list of PaginationItem entries, each holding a PaginationLink, PaginationPrevious, PaginationNext, PaginationFirst, PaginationLast or PaginationEllipsis.

For compact toolbars, PaginationGroup joins arrow links into one segmented control, PaginationInput lets the user type a page number, and PaginationSummary shows a range such as 6–10 / 62. The component does not calculate page ranges; you decide which links to render.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/pagination

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add pagination

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @phosphor-icons/react class-variance-authority

2. Add the pieces it builds on: Button.

3. Copy the source into components/ui/pagination.tsx:

"use client"

import {
  CaretDoubleLeftIcon,
  CaretDoubleRightIcon,
  CaretLeftIcon,
  CaretRightIcon,
  DotsThreeIcon,
} from "@phosphor-icons/react"
import type { VariantProps } from "class-variance-authority"
import type * as React from "react"
import { buttonVariants } from "@/components/ui/button"
import { cn } from "@/lib/utils"

function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
  return (

4. Update the import paths to match your project.

Usage

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationFirst, PaginationLast, PaginationEllipsis, PaginationSummary, PaginationGroup, PaginationInput } from "@/components/ui/pagination"

<NumberedExample />

Links render as a elements, so pass href for real routes, or href="#" with an onClick that calls preventDefault() for client-side state. Mark the current page with isActive on PaginationLink. To disable an edge link, set aria-disabled on it; it becomes non-interactive and dimmed.

PaginationLink takes a size from the Button sizes and defaults to icon-sm. Set text="" on PaginationPrevious or PaginationNext for icon-only arrows.

Examples

Compact

A page number input with joined previous and next arrows in a PaginationGroup, clamping typed values to the valid range.

import * as React from "react"
import {
  Pagination,
  PaginationGroup,
  PaginationInput,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

Rows per page

A rows-per-page select, a range summary, and first, previous, next and last arrows.

import * as React from "react"
import {
  Pagination,
  PaginationFirst,
  PaginationGroup,
  PaginationLast,
  PaginationNext,
  PaginationPrevious,
  PaginationSummary,
} from "@/components/ui/pagination"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,

With ellipsis

A long page range shortened with ellipses on both sides of the current page.

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

export default function PaginationWithEllipsis() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />

Custom labels

Previous and next links relabelled Newer and Older.

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

export default function PaginationCustomLabels() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" text="Newer" />
        </PaginationItem>
        <PaginationItem>

Large links

Page links using the larger icon button size.

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

export default function PaginationLargeLinks() {
  return (
    <Pagination>
      <PaginationContent>
        {[1, 2, 3, 4, 5].map((page) => (
          <PaginationItem key={page}>
            <PaginationLink href="#" size="icon" isActive={page === 1}>
              {page}
            </PaginationLink>

API Reference

Accessibility

• Pagination renders a nav with aria-label="pagination".
• The active PaginationLink gets aria-current="page".
• Arrow links have built-in accessible names: Go to previous page, Go to next page, Go to first page and Go to last page. Custom text on previous or next replaces the name.
• PaginationEllipsis is hidden from assistive technology.
• PaginationGroup has role="group".
• PaginationInput has no built-in label; associate one with htmlFor or aria-label.

Notes

• Styling hooks: data-slot values pagination, pagination-content, pagination-item, pagination-link, pagination-ellipsis, pagination-summary, pagination-group and pagination-input. Active links expose data-active.
• Active links use the secondary button variant and others use ghost.
• Previous and next text is hidden below the sm breakpoint, and the carets flip in right-to-left layouts.
• PaginationInput uses inputMode="numeric" to show a number keypad on touch devices.