Pagination

RAC
Loading...

Installation

Install the component via the CLI in one command.

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 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.

Loading...

Component API

Pagination

Pagination extends the native <nav> element.

classNamestring

PaginationFirst

PaginationFirst extends the <PaginationItem> component.

classNamestring
isCircleboolean
Default: false
isCurrentboolean
Default: false
size"xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg"
Default: sm

PaginationGap

PaginationGap extends the native <li> element.

classNamestring

PaginationInfo

PaginationInfo is an alias of the Intent UI <Text> component.

classNamestring

PaginationItem

PaginationItem extends the Intent UI <Link> component.

classNamestring
isCircleboolean
Default: false
isCurrentboolean
Default: false
size"xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg"
Default: sm

See the React Aria Link documentation for the full inherited API.

PaginationLabel

PaginationLabel extends the native <li> element.

classNamestring

PaginationLast

PaginationLast extends the <PaginationItem> component.

classNamestring
isCircleboolean
Default: false
isCurrentboolean
Default: false
size"xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg"
Default: sm

PaginationList

PaginationList extends the native <ul> element.

classNamestring

PaginationNext

PaginationNext extends the <PaginationItem> component.

classNamestring
isCircleboolean
Default: false
isCurrentboolean
Default: false
size"xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg"
Default: sm

PaginationPrevious

PaginationPrevious extends the <PaginationItem> component.

classNamestring
isCircleboolean
Default: false
isCurrentboolean
Default: false
size"xs" | "sm" | "md" | "lg" | "sq-xs" | "sq-sm" | "sq-md" | "sq-lg"
Default: sm

PaginationSection

PaginationSection extends the native <ul> element.

classNamestring

PaginationSpacer

PaginationSpacer extends the native <div> element.

classNamestring
Design
Link
Snippet