Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Shadcn Pagination for React Radix UI

Navigate through a list of items.

Framework
UI library

Installation

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

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

KeyDescription
Enter
Activate the focused control.
Space
Activate the focused control.

Demos

Simple

A simple pagination with only page numbers.

Icons Only

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

Rtl

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

API Reference

Pagination

PropType
AttributeType

PaginationContent

PropType
AttributeType

PaginationItem

PropType
AttributeType

PaginationLink

PropType
AttributeType

PaginationPrevious

PropType
AttributeType

PaginationNext

PropType
AttributeType

PaginationEllipsis

PropType
AttributeType