Overview

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

Preview

• Previous
• 1
• 2
• Next

Code

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

export function Demo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

About

This component is our take on the Pagination developed and maintained by Shadcn.

Installation

pnpm

pnpm add @inpulse-ui/pagination

bun

bun add @inpulse-ui/pagination

yarn

yarn add @inpulse-ui/pagination

npm

npm install @inpulse-ui/pagination

API Reference

Link

Defines a link that can be clicked to navigate to a different page.

Prop	Type	Default Value	Required
asChild	boolean	false	No
href	string	-	No

Usage

Wrap all pagination elements inside the Pagination component. The PaginationContent component is used to group the pagination items, while each individual item is wrapped in a PaginationItem. The PaginationLink component is used for the page links, and the PaginationPrevious and PaginationNext components are used for navigation buttons.

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</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.

Preview

• Previous
• 1
• 2
• 3
• More pages
• Next

Code

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

export function Demo() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink isActive href="#">2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationEllipsis />
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}