Pagination

Link
Loading...

Installation

Add the component with the CLI.

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.

buttonlinktext

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components @heroicons/react cn

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-foreground">/</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