Pagination

Pagination with page navigation, next and previous links.

Installation

npx shadcn@latest add https://exawizards.com/exabase/design/registry/pagination.json

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>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Next.js

By default the <PaginationLink /> component will render an <a /> tag.

To use the Next.js <Link /> component, make the following updates to pagination.tsx.

+ import Link from "next/link"
 
- type PaginationLinkProps = ... & React.ComponentProps<"a">
+ type PaginationLinkProps = ... & React.ComponentProps<typeof Link>
 
const PaginationLink = ({...props }: ) => (
  <PaginationItem>
-   <a>
+   <Link>
      // ...
-   </a>
+   </Link>
  </PaginationItem>
)

Note: We are making updates to the cli to automatically do this for you.

API

The PaginationLink, PaginationPrevious and PaginationNext components accept the following props.

Prop	Type	Default	Description
`isActive`	Boolean	`false`	The active state of the link.
`size`	ButtonSize	PaginationLink: `icon`. PaginationPrevious and PaginationNext is `default`	The size of the link.

Thd others components accept the native element props:

Component	Props
`Pagination`	`nav`
`PaginationContent`	`ul`
`PaginationItem`	`li`
`PaginationEllipsis`	`span`

Examples

Small

Navigation Menu Popover