PlumUI

Pagination

Page navigation where the active marker slides between numbers instead of jumping.

Navigation

Playground

Tweak the props, the preview and the code follow.

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

Installation

npx @plumsydev/plum-ui add pagination

Also pulls in button automatically.

Usage

import {
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="?page=1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="?page=2" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="?page=3" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

Compact

Previous / next only, with a page counter.

Page 1 of 24

Paginating real data

The list slides in the direction you page.

  • 4f2c91amaincdg12m ago
  • 4f2aa2bfeat/billingfra15m ago
  • 4f28b3cfix/authiad18m ago
  • 4f26c4dchore/depssfo111m ago
  • 4f24d5emainhnd114m ago
1–5 of 47

API Reference

PaginationLink

Renders an anchor with ghost button styles.

PropTypeDefault
isActive

Marks the current page and draws the sliding indicator.

booleanfalse
size

Button size token.

ButtonProps["size"]"icon"
PreviousNumber InputNextPassword Input