Thrive Design System

Components

Pagination

A navigation component for moving between pages of content in lists and tables.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis } from '@thrivecart/ui';

Examples

Basic Pagination

Default

Standard pagination with page links

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

Best Practices

✓

Show current page

Always highlight the active page so users know where they are.

✓

Disable at boundaries

Disable Previous on page 1 and Next on the last page.

✗

Don't show too many pages

Use ellipsis for large page ranges. Show 5-7 page links maximum.

✗

Don't use for single-page content

Only show pagination when there are actually multiple pages.

Props

Props

Accessibility

  • Uses nav element with aria-label="Pagination".
  • Current page is indicated with aria-current="page".
  • Previous/Next buttons have clear labels.
  • Keyboard navigable with Tab.