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/base/pagination.json

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

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

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

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

Install the following dependencies:

bun add lucide-react

npm install lucide-react

pnpm add lucide-react

yarn add lucide-react

Copy and paste the following code into your project.

components/ui/pagination.tsx

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

export const Pagination = (props: React.ComponentProps<"nav">) => {
  const { className, ...rest } = props;

  return (
    <nav
      aria-label="pagination"
      className={cn(
        "cn-pagination mx-auto flex w-full justify-center",
        className

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

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"pagination"

PaginationContent

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"pagination-content"

PaginationItem

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"pagination-item"

PaginationLink

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"pagination-link"

data-active?string

PaginationPrevious

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-icon"inline-start"

PaginationNext

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-icon"inline-end"

PaginationEllipsis

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"pagination-ellipsis"