A structured navigation system that divides content into multiple pages, improving load performance and user experience. It supports customizable page sizes.

RAC

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/pagination

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

button

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install react-aria-components @heroicons/react tailwind-merge

Anatomy

import {
  Pagination,
  PaginationFirst,
  PaginationGap,
  PaginationItem,
  PaginationLabel,
  PaginationLast,
  PaginationList,
  PaginationNext,
  PaginationPrevious,
  PaginationSection,
} from "@/components/ui/pagination"

<Pagination>
  <PaginationList className="hidden md:flex">
    <PaginationFirst href="#" />
    <PaginationPrevious href="#" />
    <PaginationSection>
      <PaginationItem href="#">1</PaginationItem>
      <PaginationItem href="#">2</PaginationItem>
      <PaginationItem href="#">3</PaginationItem>
      <PaginationGap />
      <PaginationItem href="#">23</PaginationItem>
      <PaginationItem href="#" isCurrent>
        24
      </PaginationItem>
      <PaginationItem href="#">25</PaginationItem>
    </PaginationSection>

    <PaginationNext href="#" />
    <PaginationLast href="#" />
  </PaginationList>

  <PaginationList className="md:hidden">
    <PaginationFirst href="#" />
    <PaginationPrevious href="#" />
    <PaginationSection className="rounded-(--section-radius) border px-3 *:min-w-4">
      <PaginationLabel>3</PaginationLabel>
      <PaginationLabel className="text-muted-fg">/</PaginationLabel>
      <PaginationLabel>10</PaginationLabel>
    </PaginationSection>
    <PaginationNext href="#" />
    <PaginationLast href="#" />
  </PaginationList>
</Pagination>

Examples

Simple

The simple pagination setup doesn’t display page numbers, using only basic arrow navigation.

Component API

Pagination

The Pagination component wraps pagination controls.

Prop	Type	Default
`className`	`string`	-

PaginationFirst

The PaginationFirst component links to the first page.

Prop	Type	Default
`className`	`string`	-

PaginationGap

The PaginationGap component represents skipped pages.

Prop	Type	Default
`className`	`string`	-

PaginationInfo

The PaginationInfo component displays pagination status text.

Prop	Type	Default
`className`	`string`	-

PaginationItem

The PaginationItem component represents one pagination link.

Prop	Type	Default
`className`	`string`	-
`isCurrent`	`boolean`	-

PaginationLabel

The PaginationLabel component renders pagination label text.

Prop	Type	Default
`className`	`string`	-

PaginationLast

The PaginationLast component links to the last page.

Prop	Type	Default
`className`	`string`	-

PaginationList

The PaginationList component groups pagination items.

Prop	Type	Default
`className`	`string`	-

PaginationNext

The PaginationNext component links to the next page.

Prop	Type	Default
`className`	`string`	-

PaginationPrevious

The PaginationPrevious component links to the previous page.

Prop	Type	Default
`className`	`string`	-

PaginationSection

The PaginationSection component groups pagination content.

Prop	Type	Default
`className`	`string`	-

PaginationSpacer

The PaginationSpacer component pushes pagination content apart.

Prop	Type	Default
`className`	`string`	-

See the React Aria for the full API reference.

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Link

Snippet

Pagination

On this page