Pagination

Installation

npx shadcn@latest add @uqudo/pagination

Installing it also installs Button, which every pagination link is styled with.

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/uqudo/ui/pagination"

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>
        1
      </PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

The links render plain <a> elements. To use your router's link, wrap PaginationLink in your own component or replace href handling with an onClick on the anchor.

API Reference

PaginationLink

Prop

Type

PaginationPrevious and PaginationNext