Shadcn Pagination

React pagination for splitting large datasets across pages with navigation controls. Built with TypeScript and Tailwind CSS for Next.js.

Pagination logic off?

Join our Discord community for help from other developers.

Ever built a page that loaded 50,000 search results and watched your browser cry? Or tried to find page 47 of something with infinite scroll and gave up after endless scrolling? Yeah, that's exactly when you need proper pagination. This shadcn/ui pagination component brings structured data navigation to your React applications.

Pagination showcase

Complete pagination with previous, next, and page numbers:

Loading component...

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 so screen readers understand the navigation structure. Styled with Tailwind CSS to match your design system instead of looking like a generic pager from 2005.

npx shadcn@latest add pagination

Why pagination actually works better than infinite scroll

Here's the thing—sometimes you need pagination instead of infinite scroll, especially when users need to navigate large datasets systematically. Think about search results, product catalogs, or admin panels. Users want to jump to page 15, bookmark specific results, or share a link to page 3.

Infinite scroll is great for social feeds where users want to discover content. But for data-heavy applications, pagination gives users control and predictable navigation patterns. Plus, each page gets its own URL for SEO, and you avoid the memory issues that come from loading thousands of DOM elements.

This free shadcn pagination handles the complex parts—accessibility attributes, keyboard navigation, proper semantic HTML—while you focus on your data logic. Whether you're building search interfaces, admin dashboards, or content directories in your Next.js applications, pagination that works properly keeps users oriented in your JavaScript projects.

Common pagination patterns you'll actually use

Basic numbered pagination

Standard pagination with page numbers:

Loading component...

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,}

Compact mobile pagination

Simplified navigation for smaller screens:

Loading component...

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,}

Pagination with ellipsis

Handles large page ranges efficiently:

Loading component...

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,}

Jump to beginning or end of datasets:

Loading component...

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,}

Page size selection

Let users choose items per page:

Loading component...

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,}

Features

This free open source pagination component includes everything you need:

TypeScript-first - Full type safety with pagination state and navigation events
Semantic HTML - Proper navigation landmarks and ARIA labels for accessibility
Keyboard accessible - Tab navigation and Enter/Space activation work correctly
Tailwind CSS styled - Customize with utilities, not fighting component CSS
URL-friendly - Each page can have its own addressable URL for bookmarking
Screen reader ready - Announces current page and navigation options clearly
Responsive design - Adapts gracefully from mobile to desktop layouts
Performance focused - Loads only what's needed, not endless DOM growth

API Reference

Core Components

Component	Purpose	Key Props
`Pagination`	Root navigation container	Provides semantic structure
`PaginationContent`	Items container	Groups all pagination elements
`PaginationItem`	Individual item wrapper	Handles spacing and alignment
`PaginationLink`	Page number link	`href`, `isActive` for current page

Component	Purpose	Use Case
`PaginationPrevious`	Previous page button	Navigate backward
`PaginationNext`	Next page button	Navigate forward
`PaginationEllipsis`	Omitted pages indicator	Show gaps in page ranges

Common Props

Prop	Type	Purpose
`href`	string	URL for navigation
`isActive`	boolean	Highlight current page
`className`	string	Additional Tailwind classes

Production tips

Handle edge cases properly. This free shadcn/ui pagination component requires you to manage disabled states—disable "Previous" on page 1, disable "Next" on the last page. This TypeScript component provides the UI—you provide the logic that prevents impossible navigation in your Next.js applications.

Keep mobile users in mind. Show fewer page numbers on small screens, maybe just Previous/Next with "Page X of Y" text. This open source shadcn component is responsive, but cognitive load matters more than showing every possible page number on mobile devices.

Use meaningful URLs for each page. Every page should have its own URL that users can bookmark or share. This JavaScript component handles the navigation—your routing handles the addressable URLs that make pagination useful for SEO and user experience.

Show loading states during navigation. Users need feedback when clicking pagination links, especially with slow data loading. The Tailwind CSS styled component shows the navigation—you handle loading indicators and disabled states during transitions.

Preserve user context across pages. Maintain search filters, sort orders, and selections when users navigate between pages. This component focuses on navigation—your application state management ensures users don't lose their work when paginating.

Integration with other components

Pagination naturally works with DataTable components for structured data display and Input components for page jumping in your React applications. Use Select components to let users choose page size or items per page.

For search interfaces, combine pagination with Command components for searchable data or Badge components to show active filters. This open source pattern keeps your data interfaces consistent and intuitive.

When building admin panels, pair pagination with Button components for bulk actions or Checkbox components for item selection across pages. The pagination handles navigation—other shadcn components handle data manipulation.

For loading states, use pagination with Skeleton components while fetching new page data or Alert components for error states. Your JavaScript application can compose these components while maintaining clear user feedback during navigation.

Shadcn Pagination

First and last page navigation

Page size selection

Features

API Reference

Core Components

Navigation Elements

Common Props

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Pagination

Reactpagination

Reactpagination

Reactpagination

Reactpagination

Reactpagination

Reactpagination

When should I use Pagination vs Infinite Scroll?

How do I integrate pagination with Next.js routing?

How do I let users choose items per page?

Is pagination accessible to screen readers?

How do I handle pagination with thousands of pages?

How should pagination work on mobile devices?

What URL structure works best for paginated content?

How do I handle loading states during page navigation?

On this page