Pagination

1.0.1

Set of page navigation elements, with links that lead to specific pages and navigation buttons for the previous and next page.

About

This component is a version of the Pagination component developed by Shadcn (opens in a new tab).

Installation

pnpm add @inpulse-ds/pagination

Usage

import {
  Pagination,
  PaginationContent,
  PaginationLink,
  PaginationItem,
  PaginationPrevious,
  PaginationNext,
} from "@inpulse-ds/pagination";

return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );

Examples

More than X levels

If the pagination has more than "x" levels, we recommend inserting the PaginationEllipsis subcomponent (which displays the ellipsis icon) to indicate that there are more results.

One Time Code Popover