Pagination

You know those number lists at the bottom of search results or blog posts? That's pagination - it breaks up big lists into manageable chunks so users don't get overwhelmed scrolling through hundreds of items.

Complete pagination with navigation

Full-featured pagination with previous, next, and page numbers:

import {  Pagination,  PaginationContent,  PaginationEllipsis,  PaginationItem,  PaginationLink,  PaginationNext,  PaginationPrevious,} from "@/components/ui/pagination"export default function PaginationDemo() {  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <Pagination>        <PaginationContent>          <PaginationItem>            <PaginationPrevious href="#" onClick={(e) => e.preventDefault()} />          </PaginationItem>          <PaginationItem>            <PaginationLink href="#" onClick={(e) => e.preventDefault()}>1</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#" isActive onClick={(e) => e.preventDefault()}>              2            </PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationLink href="#" onClick={(e) => e.preventDefault()}>3</PaginationLink>          </PaginationItem>          <PaginationItem>            <PaginationEllipsis />          </PaginationItem>          <PaginationItem>            <PaginationNext href="#" onClick={(e) => e.preventDefault()} />          </PaginationItem>        </PaginationContent>      </Pagination>    </div>  )}

import * as React from "react"import {  ChevronLeftIcon,  ChevronRightIcon,  MoreHorizontalIcon,} from "lucide-react"import { cn } from "@/lib/utils"import { Button, buttonVariants } from "@/components/ui/button"function Pagination({ className, ...props }: React.ComponentProps<"nav">) {  return (    <nav      role="navigation"      aria-label="pagination"      data-slot="pagination"      className={cn("mx-auto flex w-full justify-center", className)}      {...props}    />  )}function PaginationContent({  className,  ...props}: React.ComponentProps<"ul">) {  return (    <ul      data-slot="pagination-content"      className={cn("flex flex-row items-center gap-1", className)}      {...props}    />  )}function PaginationItem({ ...props }: React.ComponentProps<"li">) {  return <li data-slot="pagination-item" {...props} />}type PaginationLinkProps = {  isActive?: boolean} & Pick<React.ComponentProps<typeof Button>, "size"> &  React.ComponentProps<"a">function PaginationLink({  className,  isActive,  size = "icon",  ...props}: PaginationLinkProps) {  return (    <a      aria-current={isActive ? "page" : undefined}      data-slot="pagination-link"      data-active={isActive}      className={cn(        buttonVariants({          variant: isActive ? "outline" : "ghost",          size,        }),        className      )}      {...props}    />  )}function PaginationPrevious({  className,  ...props}: React.ComponentProps<typeof PaginationLink>) {  return (    <PaginationLink      aria-label="Go to previous page"      size="default"      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}      {...props}    >      <ChevronLeftIcon />      <span className="hidden sm:block">Previous</span>    </PaginationLink>  )}function PaginationNext({  className,  ...props}: React.ComponentProps<typeof PaginationLink>) {  return (    <PaginationLink      aria-label="Go to next page"      size="default"      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}      {...props}    >      <span className="hidden sm:block">Next</span>      <ChevronRightIcon />    </PaginationLink>  )}function PaginationEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      aria-hidden      data-slot="pagination-ellipsis"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontalIcon className="size-4" />      <span className="sr-only">More pages</span>    </span>  )}export {  Pagination,  PaginationContent,  PaginationLink,  PaginationItem,  PaginationPrevious,  PaginationNext,  PaginationEllipsis,}

Built with semantic HTML and proper ARIA labels, this free open source React component gives you all the pagination patterns users expect from modern web applications.

npx shadcn@latest add pagination

Why pagination works better than infinite scroll

Sometimes you need pagination instead of infinite scroll - here's when it shines:

• Predictable navigation - Users can jump to specific pages or sections
• SEO friendly - Each page gets its own URL for better indexing
• Memory efficient - Loads only what's needed, perfect for large datasets
• Keyboard accessible - Tab navigation, arrow keys, and screen readers
• Performance focused - No endless DOM growth with thousands of items
• User control - People can bookmark pages or share specific results

Perfect for data-heavy applications

Works best when you're building applications with large datasets - admin panels, search results, product catalogs, user directories. Pagination gives users that structured browsing experience they need for finding specific content.

Drop it into any React or Next.js project where you want users to navigate through content systematically instead of endlessly scrolling.

Next.js Integration

By default the <PaginationLink /> component renders an <a /> tag. For Next.js applications, update your pagination component to use Next.js Link:

import Link from "next/link"

type PaginationLinkProps = {
  // ... other props
} & React.ComponentProps<typeof Link>

const PaginationLink = ({ className, isActive, size = "icon", ...props }) => (
  <PaginationItem>
    <Link
      aria-current={isActive ? "page" : undefined}
      className={cn(
        // ... styling classes
      )}
      {...props}
    />
  </PaginationItem>
)

This gives you client-side navigation with Next.js routing while maintaining all the accessibility features.

API Reference

Pagination

The root container that provides semantic structure for pagination controls.

PaginationContent

Container for all pagination items, handles layout and spacing.

PaginationItem

Individual pagination item wrapper that handles proper spacing and alignment.

PaginationLink

Clickable page number or link with active state support.

PaginationPrevious

Previous page navigation button with proper labeling.

PaginationNext

Next page navigation button with proper labeling.

PaginationEllipsis

Visual indicator for omitted pages between ranges.

Data attributes:

• [aria-hidden]: "true" (since it's decorative)
• Uses More Horizontal icon from Lucide React

Keyboard Navigation

Common Patterns

Build pagination that guides users

• Show page context - Current page, total pages, or item ranges
• Handle edge cases - Disable previous on first page, next on last page
• Use meaningful labels - "Next page", "Previous page" for screen readers
• Keep it responsive - Fewer numbers on mobile, more on desktop
• Test with real data - Make sure it works with 5 pages and 500 pages
• Consider loading states - Show feedback when navigating between pages
• Preserve user state - Maintain filters, search terms across page changes
• Use proper URLs - Each page should have its own addressable URL