shadcn.io is not affiliated with official shadcn/ui

Shadcn Pagination for React

Navigate through a list of items.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/pagination.json

npx shadcn@latest add https://kit.dev/r/aria/pagination.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/pagination.json

yarn shadcn@latest add https://kit.dev/r/aria/pagination.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add react-aria-components lucide-react

npm install react-aria-components lucide-react

pnpm add react-aria-components lucide-react

yarn add react-aria-components lucide-react

Copy and paste the following code into your project.

components/ui/pagination.tsx

"use client";

import {
  ChevronLeftIcon,
  ChevronRightIcon,
  MoreHorizontalIcon,
} from "lucide-react";
import type React from "react";
import { Link as LinkPrimitive } from "react-aria-components";
import { cn } from "@/lib/utils";
import { type Button, buttonVariants } from "@/registry/aria/components/button";

type PaginationLinkProps = {
  isActive?: boolean;
} & Omit<React.ComponentProps<typeof LinkPrimitive>, "className"> &
  Pick<React.ComponentProps<typeof Button>, "size"> & {
    className?: string;
  };

Update the import paths to match your project setup.

Anatomy

Pagination
├── PaginationItem
├── PaginationEllipsis
├── PaginationFirstTrigger
├── PaginationPrevious
├── PaginationNext
└── PaginationLastTrigger

Usage

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

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        2
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Simple

A simple pagination with only page numbers.

PreviewCode

Icons Only

Use just the previous and next buttons without page numbers. Useful for data tables with a rows per page selector.

PreviewCode

Rtl

Right-to-left pagination. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Pagination

PropType

className?string

AttributeType

data-slot"pagination"

data-scope"pagination"

data-part"root"

aria-labelstring

PaginationContent

PropType

className?string

AttributeType

data-slot"pagination-content"

data-scope"pagination"

data-part"root"

aria-labelstring

PaginationItem

AttributeType

data-slot"pagination-item"

data-scope"pagination"

data-part"root"

aria-labelstring

PaginationLink

PropType

className?string

AttributeType

data-slot"pagination-link"

data-scope"pagination"

data-part"root"

aria-labelstring

data-active?string

PaginationPrevious

PropType

className?string

AttributeType

data-scope"pagination"

data-part"root"

aria-labelstring

data-icon"inline-start"

PaginationNext

PropType

className?string

AttributeType

data-scope"pagination"

data-part"root"

aria-labelstring

data-icon"inline-end"

PaginationEllipsis

PropType

className?string

AttributeType

data-slot"pagination-ellipsis"

data-scope"pagination"

data-part"root"

aria-labelstring